How to render Multiple element inside ReactDOM.render() in ReactJs

Shreyesh kolhe
September 26, 2021

 How to render Multiple element inside ReactDOM.render() in ReactJs



1. Using <div> tag

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

ReactDOM.render(
  <div>
      <h1>Shreyash Kolhe</h1>
      <p>my name is shreyash kolhe</p></div>, 
  document.getElementById("root")
);

2. Using Array Method

import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
 [
      <h1>Shreyash Kolhe</h1>,
      <p>my name is shreyash kolhe</p>
  ], 
  document.getElementById("root")
);

3. Using React Fragment <> </>

import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
 <React.Fragment>
      <h1>Shreyash Kolhe</h1>,
      <p>my name is shreyash kolhe</p>
  </React.Fragment>, 
  document.getElementById("root")
);


    OR

import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
 <>
      <h1>Shreyash Kolhe</h1>,
      <p>my name is shreyash kolhe</p>
  </>, 
  document.getElementById("root")
);