Fragment in React JS

The fragment is the replacement of the root element of the component. in some cases, design can be different when we use the <div> tag that's why React. Fragment implemented to remove designing

Fragment provides better performance as compare to div tag under render() hence we should always use Fragment in place of <div>.

Why we use Fragments?

The main reason to use the Fragments tag is:

It makes the execution of code faster as compared to the div tag.

It takes less memory.

Syntax

<React.Fragment>  

      <h2> child1 </h2>   

    <p> child2 </p>   

      .. ..... .... ...  

</React.Fragment>  

Example

// Rendering with fragments tag  

class App extends React.Component {   

    render() {   

     return (   

       <React.Fragment>  

            <h1> REACT </h1>   

        <p> Welcome to the SHIVA CONCEPT SOLUTION\. </p>   

         </React.Fragment>  

     );   

    }   

}   

There is also another shorthand that exists for declaring fragments for the above method. It looks like an empty tag in which we can use '<>' and '' instead of the 'React.Fragment'.

Example

//Rendering with short syntax   

class Columns extends React.Component {   

  render() {   

    return (   

      <>    

          <h1> REACT </h1>   

        <p> Welcome to the SHIVA CONCEPT SOLUTION\. </p>   

      </>   

    );   

  }   

}   

Create App.js using Fragments:-

import React, { Component } from 'react';  

import { render } from 'react-dom';  

export class App extends React.Component {  

      constructor(props) {  

        super(props);  

        this.callRef = React.createRef();  

        this.addingRefInput = this.addingRefInput.bind(this);  

      }  

       

      addingRefInput() {  

        this.callRef.current.focus();  

      }  

       

      render() {  

        return (  

          <React.Fragment}>  

            <h2>Adding Ref to DOM element</h2>  

            <input  

              type="text"  

              ref={this.callRef} />  

            <input  

              type="button"  

              value="Add text input"  

              onClick={this.addingRefInput}  

            />  

          </React.Fragment> 

        

        );  

      }  

    } 

Keyed Fragments

The shorthand syntax does not accept key attributes. You need a key for mapping a collection to an array of fragments such as to create a description list. If you need to provide keys, you have to declare the fragments with the explicit <React.Fragment> syntax.

Note: Key is the only attributes that can be passed with the Fragments.

Example

Function  = (props) {  

  return (  

    <Fragment>  

      {props.items.data.map(item => (  

        // Without the 'key', React will give a key warning  

        <React.Fragment key={item.id}>  

          <h2>{item.name}</h2>  

          <p>{item.url}</p>  

          <p>{item.description}</p>  

        </React.Fragment>  

      ))}  

    </Fragment>  

  )  

} 

Main Component .JS

import Fragmentexample from "./Fragmentexample"

export default function Maincomponent()

{

    const data = [{  

        id:1,

        name: 'Ayaan',  

        age: 26  

        },{  

            id:2,

        name: 'Ahana',  

        age: 22  

        },{  

            id:3,

        name: 'Peter',  

        age: 40  

        },{  

        id:4,

        name: 'Virat',  

        age: 30  

        },{

            id:5,

        name: 'Rohit',  

        age: 32  

        },{

        id:6,  

        name: 'Dhoni',  

        age: 37  

        }]

    return(<div>

       <Fragmentexample items={data} />

    </div>)

}

FragmentComponent

import { Fragment,React } from "react"

export default function Fragmentexample(props)

{

    return(

        <Fragment>  

        {props.items.map(item => (  

 

          // Without the 'key', React will give a key warning  

 

          <>  

 

            <h2>{item.name}</h2>  

 

            <p>{item.age}</p>  

 

           

 

          </>  

 

        ))}  

 

      </Fragment>  

    )

}

Example of Keyed Fragments:-

 import React from "react";

 function Fragmentexample(props)

{

    return(

        <div>  

        {props.items.map(item => (  

 

          // Without the 'key', React will give a key warning  

 

          <React.Fragment key={item.id}>  

 

            <h2>{item.name}</h2>  

 

            <p>{item.age}</p>           

 

          </React.Fragment>  

 

        ))}  

 

      </div>  

    )

}

export default Fragmentexample;

Another Example of Keyed Framgments

import React, { Component } from 'react';  

import { render } from 'react-dom';  

export class App extends React.Component {  

      constructor(props) {  

        super(props);  

        this.callRef = React.createRef();  

        this.addingRefInput = this.addingRefInput.bind(this);  

      }  

       

      addingRefInput() {  

        this.callRef.current.focus();  

      }  

       

      render() {  

        return (  

          <React.Fragment key={1001}>  

            <h2>Adding Ref to DOM element</h2>  

            <input  

              type="text"  

              ref={this.callRef} />  

            <input  

              type="button"  

              value="Add text input"  

              onClick={this.addingRefInput}  

            />  

          </React.Fragment> 

        

        );  

      }  

    }