Los elementos JSX adyacentes deben envolverse en una etiqueta adjunta

Si alguien usa varios elementos HTML dentro de un método de representación en la biblioteca React, muestra un error que especifica que los elementos JSX adyacentes deben estar envueltos en una etiqueta adjunta. El motivo del error es que cuando usamos el método de representación, solo puede tomar un solo elemento HTML. Eso significa que si tiene dos o más elementos HTML seguidos en el método de representación, entonces no funcionará y mostrará un error. Entonces, para corregir este error, se puede incrustar todo este elemento HTML dentro de un solo elemento div. Cualquier cosa que vaya dentro de un div contará como un solo elemento HTML.

Sintaxis: 

ReactDOM.render(
<div>
  // now one can use more than one html 
  // element inside div element.
</div>,
  document.getElementById("root)
 ); 

Ejemplo 1: cuando uso varios elementos HTML dentro de un método de representación:

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

Salida: Recibo un error que especifica que los elementos JSX adyacentes deben estar envueltos en una etiqueta adjunta. Para corregir este error, las etiquetas <h1> y <p> deben incluirse en un solo elemento HTML como la etiqueta <div> . 

Ejemplo 2: cuando uso un solo elemento HTML dentro de un método de representación:

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')
);

Salida: Obtengo la salida esperada sin error, como en el método de procesamiento <h1> y la etiqueta <p> está envuelta dentro de un solo elemento div HTML y cualquier cosa que vaya dentro de un div contará como un solo elemento HTML.