What is ReactDOM.render () ?

Two arguments, HTML code and an HTML element, are required by the ReactDOM.render() function. The function’s goal is to display the designated HTML code inside the designated HTML element. ReactDom.render() Method renders, “What to show” and “where to show” for example👇👇

import React from 'react';
import ReactDom from 'react-dom';
 ReactDom.render(<h1>Atom can neither be created nor Destroyed.</h1>,
 document.getElementById('root'));

ReactDom.render() method 1

How to use multiple elements inside ReactDom.Render () in React.Js

In the above example i have shown how to use ReactDom.Render Method using single element inside. Now question arises how to use multiple elements inside ReactDom.Render?

Method 1 – Now In this scenario we can use <div><div> as a parent element and inside the parent element we can write <h1></h1>, <p></p>. For example👇

**//First Method//**
import React from 'react';
import ReactDom from 'react-dom';
 ReactDom.render(<div><h1>Atom can neither be created nor Destroyed.</h1>
 <p>Lord shiva is refered as Atom in Hindu Mythology</p>
 <h1>Who is Lord Shiva</h1>
 <p>Lord Shiva is an atom</p></div>,
 document.getElementById('root'));

Here I have taken div as a parent child and inside div I have inserted h1 and p tag 2 times. This is how we can use ReactDom.render() to create multiple elements.

Method 2 – Now if you are using the latest version of React or version that is above 16.1 then you can use Array method of javascript in ReactDom.render(). In array method instead of writing <div> we can simply open and close bracket by sepearing tags using comma 👉[Atom,Hindu,Mythology].In React you can also get call back fuction. Rendering multiple elements using array method For example👇

**//Second Method//**
import React from 'react';
import ReactDom from 'react-dom';
 ReactDom.render([<h1>Atom can neither be created nor Destroyed.</h1>,
 <p>Lord shiva is refered as Atom in Hindu Mythology</p>,
 <h1>Who is Lord Shiva</h1>,
 <p>Lord Shiva is an atom</p>,
<h1>Lord Shiva lives at Kailash mountain</h1>],
 document.getElementById('root'));

Array method rendering multiple elements.

Here you can see the result of both the method in rendering multiple elements in Reactjs and the results are same but still I suggest you to use array method between two because it is fast and easy and also it can give a call back function.

This is how we can use ReactDom.render method to bring JSX live on browser single time or multiple times by using 2 methods. I hope this article helped you. If you want me change or add anything do comment and let me know. Thankyou.

Also Learn: How to Install React in Your Computer