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!

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

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Show More

Hot Article

What's New in Windows 11 KB5054979 & How to Fix Update Issues

4 weeks ago By DDD

How to fix KB5055523 fails to install in Windows 11?

3 weeks ago By DDD

How to fix KB5055518 fails to install in Windows 10?

3 weeks ago By DDD

Strength Levels for Every Enemy & Monster in R.E.P.O.

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Blue Prince: How To Get To The Basement

3 weeks ago By DDD

Show More

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Show More

Hot Topics

Where is the login entrance for gmail email?

7926

15

Java Tutorial

1652

14

CakePHP Tutorial

1411

52

Laravel Tutorial

1303

25

PHP Tutorial

1249

29

Show More