React Fragment in React Js

- Monday, May 30, 2022

React Fragment in React Js

It was first introduced in react version 16.2

Fragments lets you to group a list of children without adding extra nodes ( div ) to the DOM.

It is common practice in react Js that, we need to return multiple elements from a component.

Sample Code:

A) App.js ( with div tag ) - There is a one problem associated with below code, clearly it will add one extra div tag which is unnecessary.

import React from "react";

export default function App() {
  return (
    // Extra div tag is added
    <div>
      <h1>Hello</h1>
      <p>Welcome to Vikas Programming</p>
    </div>
  );
}

B) App.js ( with <React.Fragment> tag ) - This will not add any extra element in DOM, so its solution to above problem.

import React from "react";

export default function App() {
  return (
    // No extra div tag is added
    <React.Fragment>
      <h1>Hello</h1>
      <p>Welcome to Vikas Programming</p>
    </React.Fragment>
  );
}

C) App.js ( with Empty tag <> ) - We can use empty tag ( <> ) as alternative to ‘<React.Fragment>’ but important thing to remember here is that empty tag don’t have key attribute so it will be not useful for iteration through a list or a collection (Refer Keyed Fragments below ).

import React from "react";

export default function App() {
  return (
    // Same as React.Fragment, shorter notation syntax
    <>
      <h1>Hello</h1>
      <p>Welcome to Vikas Programming</p>
    </>
  );
}

Keyed Fragments:

<React.Fragment> syntax may have key attribute. This will be useful while iterating through a list or a collection as shown below.

D) App.js

import React from 'react';
import './style.css';

export default function App() {
  let users = [
    { id: 1, firstName: 'vikas', lastName: 'gore' },
    { id: 2, firstName: 'vijay', lastName: 'patil' },
  ];
  
  return users.map((user) => (
    // Without the `key`, React will fire a key warning
    <React.Fragment key={user.id}>
      <h2>{user.firstName}</h2>
      <h2>{user.lastName}</h2>
      <h2>{user.address}</h2>
    </React.Fragment>
  ));
}