ns am do the efforts to collection up mine React.js app so that it only renders if a variable ns have set is true.

The means my render duty is set up look at like:

render: function() var text = this.state.submitted ? "Thank you! suppose a monitor up at "+email+" soon!" : "Enter your email to request at an early stage access:"; var format = this.state.submitted ? "backgroundColor": "rgba(26, 188, 156, 0.4)" : ; return (
) ,Basically, the important section here is the if(this.state.submitted==false) portion (I want these div elements to display up as soon as the submitted change is collection to false).

But as soon as running this, I acquire the error in the question:

Uncaught Error: Parse Error: line 38: adjacent JSX aspects must it is in wrapped in an enclosing tag

What is the issue here? and also what have the right to I use to make this work?


*

*

You should put your component in between an enclosing tag, i beg your pardon means:

// WRONG!return ( )Instead:

// Correctreturn (
)Edit: per Joe Clay"s comment around the fragments API

// more Correctreturn ( )// brief syntaxreturn ( )

*

*

It is late to price this question however I thought It will include to the explanation.

You are watching: Adjacent jsx elements must be wrapped in an enclosing tag

It is keep going because any type of where in your password you room returning two facets simultaneously.

e.g

return(
)**More thorough Explanation**Your listed below jsx code get transformed

class application extends React.Component render() return (
); into this

_createClass(App, < key: "render", value: role render() return React.createElement( "div", null, React.createElement( "h1", null, "Welcome come React" ) ); >);But if you do this

class application extends React.Component render() return ( Welcome to react
); this gets converted right into this(Just for illustration purpose, actually you will gain error : adjacent JSX facets must it is in wrapped in one enclosing tag)

_createClass(App, < key: "render", value: role render() return React.createElement( "div", null, "Hi" ); return React.createElement( "h1", null, "Welcome come React" ) >);In the above code you can see that you are trying to return twice native a an approach call, i beg your pardon is clearly wrong.

Edit- Latest changes in reaction 16 and own-wards:

If you carry out not want to include extra div come wrap around and want come return an ext than one child components you deserve to go v React.Fragments.

See more: Does Vicks Vapor Rub Help With Erectile Dysfunction ? Does Vicks Vapor Rub Help With Ed

React.Fragments ()are little bit faster and also has less memory consumption (no need to produce an extra DOM node, less cluttered DOM tree).

e.g (In react 16.2.0)

render() return ( reaction fragments.

A heading

more React fragments.

Another heading

Even much more React fragments. );or

render() return ( reaction fragments.

A heading

much more React fragments.

Another heading

Even more React fragments. );or

render() return < "Some text.",

A heading

, "More text.",

Another heading

, "Even much more text." >;