parse error: adjacent jsx elements must be wrapped in an enclosing tag

Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag You should put your component between an enclosing tag, Which means: Uncaught Error: Parse Error: Line 38: Adjacent JSX elements must be wrapped in an enclosing tag this gets converted into this (Just for illustration purpose, actually you will get error : Adjacent JSX elements must be wrapped in an enclosing tag)

This is our Splunktool team suggestion ✌, we tried and its working fine

// Incorrect
return(
<div id="div1"></div>
<div id="div1"></div>
)
// Correct
return(
<div id="parent">
   <div id="div1"></div>
   <div id="div1"></div>
</div>
)

2._

// WRONG!

return (
<Comp1 />
<Comp2 />
)

Instead:

// Correct

return (
<div>
   <Comp1 />
   <Comp2 />
</div>
)

It is happening because any where in your code you are returning two elements simultaneously.

e.g

return(
<div id="div1"></div>
<div id="div1"></div>
)

It should be wrapped in a parent element. e.g

 return(
 <div id="parent">
    <div id="div1"></div>
    <div id="div1"></div>
 </div>
 )

Suggestion : 2

Output: I get the expected output with no error, as in render method <h1> and <p> tag is wrapped inside a single div HTML element and anything that goes inside a div will count as a single HTML element. Example 2: When I use a single HTML element inside a render method : If anyone uses multiple HTML elements inside a render method in the React library, it shows an error specifying that Adjacent JSX elements must be wrapped in an enclosing tag. The reason for the error is that when we use the render method it can only take a single HTML element. That means if you have two or more HTML elements back to back in the render method, then it’s not going to work and show an error. So to fix this error one can embed this all HTML element inside a single div element. Anything that goes inside a div will count as a single HTML element.

Syntax :

ReactDOM.render(
<div>
   // now one can use more than one html
   // element inside div element.
</div>,
document.getElementById("root)
);

Example 1: When I use multiple HTML elements inside a render method :

import React from 'react';
import ReactDOM from 'react-dom';
  
ReactDOM.render(
  <h1>Pretagcode For Pretagcode</h1>
    
<p>Learn Programming </p>
  
  document.getElementById('root')
);

import React from 'react';
import ReactDOM from 'react-dom';
  
ReactDOM.render(
  <div>
     <h1>Pretagcode For Pretagcode</h1>
       
   <p>Learn Programming </p>
     
     
</div>,
  document.getElementById('root')
);

Suggestion : 3

I am trying to set up my React.js app so that it only renders if a variable I have set is true. The way my render function is set up looks like: Basically, the important portion here is the if(this.state.submitted==false) portion (I want these div elements to show up when the submitted variable is set to false). AWS certification career opportunities

1._

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>

if(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>
    )
  },

But when running this, I get the error in the question:

Uncaught Error: Parse Error: Line 38: Adjacent JSX elements must be wrapped in an enclosing tag

You just need to put your component between an enclosing tag which means:

Instead:

return (
<Comp1 />
<Comp2 />
)

// For Short syntax

return (
<>
   <Comp1 />
   <Comp2 />
</>
)

Suggestion : 4

To resolve the error, you either need to wrap root sibling elements into a parent element, or you need to use fragments. The problem with using a div element as a wrapper is that you will end up with a bunch of extra DOM elements for no reason. This is why it is preferred to use the built-in React.Fragment element instead. You may also return an array of elements, where a fragment may not be applicable. However, this is only on edge cases.

1._

// ❌ This will throw the above error
const App = () => {
    return (
        <h1>Why returning multiple elements from React is invalid.</h1>
        <h2>Common React errors</h2>
    )
}

2._

// ✔️ Use only one root element
const App = () => {
    return (
        <div>
            <h1>Why returning multiple elements from React is invalid.</h1>
            <h2>Common React errors</h2>
        </div>
    )
}

// ✔️ Even better to use fragments
const App = () => {
    return (
        <React.Fragment>
            <h1>Why returning multiple elements from React is invalid.</h1>
            <h2>Common React errors</h2>
        </React.Fragment>
    )
}

3._

import React, { Fragment } from 'react'

// Using only <Fragment />
const App = () => {
    return (
        <Fragment>
            <h1>Why returning multiple elements from React is invalid.</h1>
            <h2>Common React errors</h2>
        </Fragment>
    )
}

// Using a shorthand syntax
const App = () => {
    return (
        <>
            <h1>Why returning multiple elements from React is invalid.</h1>
            <h2>Common React errors</h2>
        </>
    )
}

Suggestion : 5

Uncaught Error: Parse Error: Line 38: Adjacent JSX elements must be wrapped in an enclosing tag Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag this gets converted into this(Just for illustration purpose, actually you will get error : Adjacent JSX elements must be wrapped in an enclosing tag) But when running this, I get the error in the question:

I am trying to set up my React.js app so that it only renders if a variable I have set is true.

The way my render function is set up looks like:

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>

if(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>
    )
  },

You should put your component between an enclosing tag, Which means:

// WRONG!

return (
<Comp1 />
<Comp2 />
)

Instead:

// Correct

return (
<div>
   <Comp1 />
   <Comp2 />
</div>
)

It is happening because any where in your code you are returning two elements simultaneously.

e.g

return(
<div id="div1"></div>
<div id="div1"></div>
)

It should be wrapped in a parent element. e.g

 return(
 <div id="parent">
    <div id="div1"></div>
    <div id="div1"></div>
 </div>
 )