React Fragments

React Fragments

*      In React , Whenever you want to render something on the screen, you need to use a render method inside the component.

*      The render Method will only render a single root node inside it at a time.

*      However, if you want to return multiple elements, the render method will require a ‘div’ tag and put the entire content or elements inside it.

*      This extra node to the DOM sometimes results in the wrong formatting of your HTML output and its not good semantic html code.

*      It takes lesser memory and quicker execution.

 

Advantage

*     Time save

*     Memory will be save

 

Changes in index.js

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import './myfile.scss';

import App from './App';

import reportWebVitals from './reportWebVitals';

import styles from './demo.module.css';

 

const root = ReactDOM.createRoot(

  document.getElementById('root')

);

class Tablecreation extends React.Component{

  render(){

    return(

      <table>

        <tr>

          <Rowcreation/>

        </tr>

      </table>

    )

  }

}

class Rowcreation extends React.Component{

  render(){

    return(

      <React.Fragment>

        <td>Hii</td>

        <td>Hello</td>

      </React.Fragment>

    )

  }

}

 

var mystyle={color:'green',textAlign:'center'}

const element =<div ><Tablecreation/></div>;

 root.render(element);

 

 

 

Output

 

React Shorthand Properties

Removing ReactFragment

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import './myfile.scss';

import App from './App';

import reportWebVitals from './reportWebVitals';

import styles from './demo.module.css';

 

const root = ReactDOM.createRoot(

  document.getElementById('root')

);

class Tablecreation extends React.Component{

  render(){

    return(

      <table>

        <tr>

          <Rowcreation/>

        </tr>

      </table>

    )

  }

}

class Rowcreation extends React.Component{

  render(){

    return(

      <>

        <td>Hii</td>

        <td>Hello</td>

      </>

    )

  }

}

 

var mystyle={color:'green',textAlign:'center'}

const element =<div ><Tablecreation/></div>;

 root.render(element);

 

 

 

Output