If anyone uses multiple HTML elements inside a render method in the React library, it shows an error specifying that Adjacent JSX elements must be wrapped in an enclosing tag. The reason for the error is that when we use the render method it can only take a single HTML element. That means if you have two or more HTML elements back to back in the render method, then it’s not going to work and show an error. So to fix this error one can embed this all HTML element inside a single div element. Anything that goes inside a div will count as a single HTML element.
ReactDOM.render( <div> // now one can use more than one html // element inside div element. </div>, document.getElementById("root) );
Example 1: When I use multiple HTML elements inside a render method :
Output: I get an error specifying that Adjacent JSX elements must be wrapped in an enclosing tag . To fix this error <h1> and <p> tag must be wrapped in a single HTML element like <div> tag .
Example 2: When I use a single HTML element inside a render method :
Output: I get the expected output with no error, as in render method <h1> and <p> tag is wrapped inside a single div HTML element and anything that goes inside a div will count as a single HTML element.
- ReactJS | Introduction to JSX
- What purpose does a <script> tag serve inside of a <noscript> tag?
- Why <big> tag is not in HTML5 while <small> tag exists ?
- Top 5 Skills You Must Know Before You Learn ReactJS
- HTML5 | <details> tag
- HTML5 | <aside> Tag
- HTML5 | article tag
- How to break line without using <br> tag in HTML / CSS ?
- HTML5 | date attribute in <input> Tag
- How to give a div tag 100% height of the browser window using CSS
- HTML | bdo Tag
- HTML | dt Tag
- HTML | dl Tag
- HTML | br Tag
- HTML | label Tag
- HTML | frameset Tag
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.