Articles → REACT.JS → React Fragment In The Render Method In React Js

React Fragment In The Render Method In React Js






Purpose




Picture showing the render method in the jsx file
Click to Enlarge



Picture showing the error message when there are more than one parent
Click to Enlarge






How To Use The “Render Fragment”?




import React from 'react';
import ReactDOM from 'react-dom'


const element = <React.Fragment>Hello World</React.Fragment>;

ReactDOM.render(element, document.getElementById('root'));



Benefits Of Using The “Render Fragment”




  1. Fragment is faster
  2. DOM is less cluttered

Use Hooks For Using Fragments




import React, { Fragment } from 'react';
import ReactDOM from 'react-dom';


const element = <Fragment>Hello World</Fragment>;

ReactDOM.render(
    element,
  document.getElementById('root')
);



Posted By  -  Karan Gupta
 
Posted On  -  Monday, August 2, 2021
 
Updated On  -  Monday, October 18, 2021

Query/Feedback


Your Email Id  
 
Subject 
 
Query/FeedbackCharacters remaining 250