Adjacent JSX elements must be wrapped in an enclosing tag

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.

Syntax : 

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 :

Javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

import React from 'react';
import ReactDOM from 'react-dom';
  
ReactDOM.render(
  <h1>Geeks For Geeks</h1>
    
<p>Learn Programming </p>
  
  document.getElementById('root')
);

chevron_right


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 :

Javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

import React from 'react';
import ReactDOM from 'react-dom';
  
ReactDOM.render(
  <div>
  <h1>Geeks For Geeks</h1>
    
<p>Learn Programming </p>
  
  </div>,
  document.getElementById('root')
);

chevron_right


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.

react-js-img

My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. 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.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.