Fragment in React JS

0


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

Post a Comment

0Comments

POST Answer of Questions and ASK to Doubt

Post a Comment (0)