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

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