Pourquoi est-ce que j'obtiens « Erreur d'analyse : les éléments JSX adjacents doivent être enveloppés dans une balise englobante » dans React ?

Erreur d'analyse : les éléments JSX adjacents doivent être enveloppés dans une balise englobante

Problème :
Lors de la tentative pour restituer conditionnellement des composants basés sur une variable, une erreur se produit : "Erreur d'analyse : les éléments JSX adjacents doivent être enveloppés dans une balise englobante."

Question :
Quelles sont les causes de cette erreur et comment peut-il être résolu ?

Réponse :
Dans React, chaque composant ou groupe de composants doit être enfermé dans une seule balise. Dans le code fourni, le rendu conditionnel fait apparaître les éléments JSX adjacents (dans ce cas, les composants input et ReactCSSTransitionGroup) sans balise englobante.

Solution :
Pour résoudre l'erreur, enveloppez ces éléments dans une balise englobante appropriée, telle qu'un

<code class="jsx">render: function() {
    return (
      <div>
        {this.state.submitted == false && (
          <>
            <input type="email" onChange={this._updateInputValue} />
            <ReactCSSTransitionGroup>
              <div>
                <a href="#" onClick={this.saveAndContinue}>Request Invite</a>
              </div>
            </ReactCSSTransitionGroup>
          </>
        )}
      </div>
    );
  },</code>