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!

if for Error using dom this

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Stay ahead in web development: latest news, tools, and insights #57Next article：Stay ahead in web development: latest news, tools, and insights #57

Related articles

See more

• An in-depth analysis of the Bootstrap list group component
• Detailed explanation of JavaScript function currying
• Complete example of JS password generation and strength detection (with demo source code download)
• Angularjs integrates WeChat UI (weui)
• How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills