Render multiple elements inside ReactDOM.render() method

Reading Time:- 0 min 56 sec

Reading Time:- 0 min 56 sec


Avatar

 BY TEJAS
Student, Web Developer, Great Programmer





ReactDOM.render() method is useful for rendering JSX elements on the screen. This method accepts two arguments.
ReactDOM.render(what, where); This is its basic structure.
here, what = what is meant to be shown and
          where = where is meant to be shown.


When we create a JSX element in the ReactDOM.render() method. By default, we can only show one element. If you want to show more than one element, you have to follow some of its techniques or rules. These techniques or rules are explained below.



ADVERTISEMENT




Using <>...</>

Inside the opening and closing tags, we can write as many elements as we want. This is a very simple method from which we can show as many elements as we want. <>..</> It is also called syntactic sugar form. You will immediately understand how to use this technique by looking at the following program.

import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render( <> <h1>Hello, Programmer!</h1> <h5>This is ProgramTuts.com</h5> <p>You are the great Programmer!</p> </>, document.getElementById('root'); );


ADVERTISEMENT




Using <div>..</div>

Another option is to use the <div> tag instead of just the opening and closing tag <>..</>. as we saw above. The following program will help you to understand easily.

import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render( <div> <h1>Hello, Programmer!</h1> <h5>This is ProgramTuts.com</h5> <p>You are the great Programmer!</p> </div>, document.getElementById('root'); );


ADVERTISEMENT




Using <React.Fragment>..</React.Fragement>

<React.Fragment> is a pre-defined JSX element that allows you to show more than one JSX element. This technique is also very simple. In this also you need All the rest of your JSX elements can be written within this tag or element. Please see the below code.

import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render( <React.Fragment> <h1>Hello, Programmer!</h1> <h5>This is ProgramTuts.com</h5> <p>You are the great Programmer!</p> </React.Fragment>, document.getElementById('root'); );

Thank You,


COMMENTS





Search
Advertisement
Advertisement
Share With
Follow us on
Advertisement
Advertisement