Pourquoi est-ce que je reçois une erreur « 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

Lors du rendu des composants React, il est essentiel de respecter la règle selon laquelle les éléments JSX adjacents doivent être inclus dans une balise parent. Cette erreur se produit lorsque des éléments existent côte à côte sans être encapsulés par un parent commun.

Cause de l'erreur

Le code fourni contient une instruction if qui restitue conditionnellement deux éléments div en fonction de la valeur de la variable this.state.submit. Cependant, ces éléments sont adjacents et ne sont inclus dans aucune balise parent.

Solution

Pour résoudre cette erreur, enveloppez les éléments rendus conditionnellement dans une balise englobante. Cela garantira que la structure JSX est valide. Par exemple, vous pouvez modifier le code comme suit :

<code class="javascript">render: function() {
  var text = this.state.submitted ? 'Thank you!  Expect a follow up at '+email+' soon!' : 'Enter your email to request early access:';
  var style = this.state.submitted ? {"backgroundColor": "rgba(26, 188, 156, 0.4)"} : {};
  return (
    <div>
      {this.state.submitted == false && (
        <>
          <input type="email" className="input_field" onChange={this._updateInputValue} ref="email" value={this.state.email} />

          <ReactCSSTransitionGroup transitionName="example" transitionAppear={true}>
            <div className="button-row">
              <a href="#" className="button" onClick={this.saveAndContinue}>Request Invite</a>
            </div>
          </ReactCSSTransitionGroup>
        </>
      )}
    </div>
  )
},</code>

Dans ce code modifié, nous avons entouré les éléments rendus conditionnellement dans un

<code class="javascript">render: function() {
  var text = this.state.submitted ? 'Thank you!  Expect a follow up at '+email+' soon!' : 'Enter your email to request early access:';
  var style = this.state.submitted ? {"backgroundColor": "rgba(26, 188, 156, 0.4)"} : {};
  return (
    <div>
      {this.state.submitted == false && (
        <>
          <input type="email" className="input_field" onChange={this._updateInputValue} ref="email" value={this.state.email} />

          <ReactCSSTransitionGroup transitionName="example" transitionAppear={true}>
            <div className="button-row">
              <a href="#" className="button" onClick={this.saveAndContinue}>Request Invite</a>
            </div>
          </ReactCSSTransitionGroup>
        </>
      )}
    </div>
  )
},</code>