Why Do I Get \'Parse Error: Adjacent JSX Elements Must Be Wrapped in an Enclosing Tag\' in React?

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

Issue:
When attempting to conditionally render components based on a variable, an error occurs: "Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag."

Question:
What causes this error and how can it be resolved?

Answer:
In React, every component or group of components must be enclosed within a single tag. In the provided code, the conditional rendering is causing adjacent JSX elements (in this case, the input and ReactCSSTransitionGroup components) to appear without an enclosing tag.

Solution:
To resolve the error, wrap these elements in a suitable enclosing tag, such as a

or a React.Fragment.

Example:

<code class="jsx">render: function() {
    return (
      <div>
        {this.state.submitted == false && (
          <>
            <input type="email" onChange={this._updateInputValue} />
            <ReactCSSTransitionGroup>
              <div>
                <a href="#" onClick={this.saveAndContinue}>Request Invite</a>
              </div>
            </ReactCSSTransitionGroup>
          </>
        )}
      </div>
    );
  },</code>

Using the wrapper provides a lightweight and semantically neutral option for grouping elements without introducing additional DOM nodes.

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

for Error using Conditional dom this input

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