In this article, you will learn in detail about React.Fragment and you will get answers to the following questions.

  1. What is React Fragment?
  2. Why is React Fragment required? // What is the work of React Fragment?
  3. How many ways to use React.Fragment?
  4. What is an Empty Tag <> </>?
  5. What is the Difference between an Empty Tag <> </> vs <React.Fragment> </React.Fragment>?

1. What is React Fragment?

React Fragment allows you to wrap the group of multiple elements without adding an extra node to the DOM.

2. Why React Fragment is required? // What is the work of React Fragment?

ReactJS (component JSX) rule returns only one (single) element from a component. A one (single) element can have multiple / child elements within.

To return multiple elements from a React component, you'll need to wrap the elements in a root element (Parent element) that is called React.Fragment.

3. How many ways to write React.Fragment or compatible code?

Example 1

(Single Element return)

const App = () => {
return (
    <h1>I am a single element coming from the App Component</h1>
  );
}
export default App

Code Explanation

In the above example, the App component returns a single element <h1> that is executable as well as acceptable, and no error will be returned. While returning a single element, we can avoid wrapping the JSX in another wrapper element as per the above example.

Example 2

(This example will generate a SYNTAX ERROR)

const App = () => {
return (
    <h1>I am the first element coming from the APP component.</h1>
    <p>I am the second element coming from the APP component.</p>
  );
}
export default App

Code Explanation

As per the rule above, the code encounters an error. To resolve this error, correct code is in Example 3, Example 4, and Example 5 given just below.

Example 3

(Used DIV tag to wrap the other element.)

const App = () => {
return (
    <div>
        <h1>I am the first element coming from the APP component.</h1>
        <p>I am the second element coming from the APP component.</p>
    </div>
  );
}
export default App

Code Explanation

The above code will work fine without any errors. We gave <div> tag to wrap the <h1>, <p> elements.

Example 4

(Used Empty Tag)

const App = () => {
return (
    <>
        <h1>I am the first element coming from the APP component.</h1>
        <p>I am the second element coming from the APP component.</p>
    </>
  );
}
export default App

Example 5

(Used React.Fragment)

const App = () => {
return (
    <React.Fragment>
        <h1>I am the first element coming from the APP component.</h1>
        <p>I am the second element coming from the APP component.</p>
    </React.Fragment>
   );
}
export default App

4. What is an Empty Tag <> </>?

Empty Tag <> </> is the simplest and shorthand syntax for <React.Fragment> component. It's supported in JSX syntax, please note this is not part of HTML and Empty Tag <> </> is not supported natively by browsers.

5. What is the Difference between Empty Tag <> </> vs <React.Fragment> </React.Fragment>?

Only one very important difference is found the Empty Tag <> </> cannot use KEY attribute and <React.Fragment> </React.Fragment> can use the KEY attribute.

Example

const App = () => {
  const cities = ["Mumbai", "Delhi", "Surat"];
  return (
     <div>
      {cities.map(city => (
        <React.Fragment key={city}>
          <p>Our next city is…</p>
          <p>{city}!</p>
        </React.Fragment>
      ))}
    </div>
  );
}