Overview Of React Fragment

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>
  );
}