Why am I getting a \'Parse Error: Adjacent JSX Elements Must Be Wrapped in an Enclosing Tag\' error in React?-JS Tutorial-php.cn

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

Mary-Kate Olsen

Release： 2024-11-05 09:36:02

Original

441 people have browsed it

Why am I getting a

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>

Copy after login

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>

Copy after login

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!

source：php.cn

Previous article：Stay ahead in web development: latest news, tools, and insights #57 Next article：What is the difference between `window.location.href` and `window.open()` in JavaScript?

Statement of this Website

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