Java, .NET, PHP, PYTHON, ANGULAR, ML, Data Science, Testing, CI Tutorials in Easy Languages.

"Best Software Training, Internship, Project Development center of Indore India, Helpline 780506-3968"

 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>  

  )  

}  



Example of Keyed 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 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

If you have any doubt in programming or join online classes then you can contact us by comment .

Previous Post Next Post