Why am I getting a \'Parse Error: Adjacent JSX Elements Must Be Wrapped in an Enclosing Tag\' error in React?

Parse Error: Adjacent JSX Elements Must Be Wrapped in an Enclosing Tag

When rendering React components, it's essential to adhere to the rule that adjacent JSX elements must be enclosed in a parent tag. This error occurs when elements exist side-by-side without being wrapped by a common parent.

Cause of the Error

The provided code contains an if statement that conditionally renders two div elements based on the value of the this.state.submitted variable. However, these elements are adjacent and not enclosed in any parent tag.

Solution

To resolve this error, wrap the conditionally rendered elements within an enclosing tag. This will ensure that the JSX structure is valid. For example, you could modify the code to the following:

<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>

In this modified code, we have enclosed the conditionally rendered elements within an enclosing

tag. This ensures that the adjacent JSX elements have a valid parent and the error is resolved.

Fragments API (Optional)

As an alternative to using an additional div tag, you can use the Fragments API. This allows you to group elements without adding an extra node to the DOM. The following code showcases how you can use fragments:

<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>

In this code, we have used the component to wrap the conditionally rendered elements. This achieves the same result as using a

tag, but it does not add any additional nodes to the DOM.

The above is the detailed content of Why am I getting a \'Parse Error: Adjacent JSX Elements Must Be Wrapped in an Enclosing Tag\' error in React?. For more information, please follow other related articles on the PHP Chinese website!