Parse Error Adjacent JSX elements must be wrapped in an enclosing tag

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        lt div gt   if this state submitted  false             lt input type  email  className  input field  onChange  this  updateInputValue  ref  email  value  this state email    gt          lt ReactCSSTransitionGroup transitionName  example  transitionAppear  true  gt         lt div className  button-row  gt            lt a href     className  button  onClick  this saveAndContinue  gt Request Invite lt  a gt        lt  div gt        lt  ReactCSSTransitionGroup gt        lt  div gt               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      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   What is the issue here   And what can I use to make this work

User · Answer

React 16 gets your return as an array so it should be wrapped by one element like div.

Wrong Approach

render(){
    return(
    <input type="text" value="" onChange={this.handleChange} />

     <button className="btn btn-primary" onClick=   {()=>this.addTodo(this.state.value)}>Submit</button>

    );
}

Right Approach (All elements in one div or other element you are using)

render(){
    return(
        <div>
            <input type="text" value="" onChange={this.handleChange} />

            <button className="btn btn-primary" onClick={()=>this.addTodo(this.state.value)}>Submit</button>
        </div>
    );
}

User · Answer

React components must wrapperd in single container that may be any tag  e g    lt  div     lt    div    You can check render method of ReactCSSTransitionGroup

User · Answer

For Rect-Native developers  I encounter this error while renderingItem in FlatList  I had two Text components  I was using them like below  renderItem       item     gt         lt Text style    styles item  gt  item key  lt  Text gt        lt Text style    styles item  gt  item user  lt  Text gt      But after I put these tow Inside View Components it worked for me   renderItem       item     gt       lt View style  styles flatview  gt         lt Text style    styles item  gt  item key  lt  Text gt         lt Text style    styles item  gt  item user  lt  Text gt      lt  View gt       You might be using other components but putting them into View may be worked for you

User · Answer

I think the complication may also occur when trying to nest multiple Divs within the return statement  You may wish to do this to ensure your components render as block elements    Here s an example of correctly rendering a couple of components  using multiple divs    return      lt div gt       lt h1 gt Data Information lt  H1 gt       lt div gt         lt Button type  primary  gt Create Data lt  Button gt       lt  div gt     lt  div gt

User · Answer

You should put your component between an enclosing tag  Which means      WRONG   return          lt Comp1   gt       lt Comp2   gt      Instead      Correct  return        lt div gt          lt Comp1   gt          lt Comp2   gt       lt  div gt      Edit  Per Joe Clay s comment about the Fragments API     More Correct  return        lt React Fragment gt          lt Comp1   gt          lt Comp2   gt       lt  React Fragment gt        Short syntax  return        lt  gt          lt Comp1   gt          lt Comp2   gt       lt   gt

User · Answer

The problem     Parse Error  Adjacent JSX elements must be wrapped in an enclosing tag   This means that you are trying to return multiple sibling JSX elements in an incorrect manner  Remember that you are not writing HTML  but JSX  Your code is transpiled from JSX into JavaScript  For example   render       return   lt p gt foo bar lt  p gt        will be transpiled into   render       return React createElement  p   null   foo bar        Unless you are new to programming in general  you already know that functions methods  of any language  take any number of parameters but always only return one value  Given that  you can probably see that a problem arises when trying to return multiple sibling components based on how createElement   works  it only takes parameters for one element and returns that  Hence we cannot return multiple elements from one function call     So if you ve ever wondered why this works     render       return        lt div gt         lt p gt foo lt  p gt         lt p gt bar lt  p gt         lt p gt baz lt  p gt       lt  div gt           but not this     render       return        lt p gt foo lt  p gt       lt p gt bar lt  p gt       lt p gt baz lt  p gt           it s because in the first snippet  both  lt p gt -elements are part of children of the  lt div gt -element  When they are part of children then we can express an unlimited number of sibling elements  Take a look how this would transpile   render       return React createElement       div       null      React createElement  p   null   foo        React createElement  p   null   bar        React createElement  p   null   baz               Solutions  Depending on which version of React you are running  you do have a few options to address this    Use fragments  React v16 2  only    As of React v16 2  React has support for Fragments which is a node-less component that returns its children directly   Returning the children in an array  see below  has some drawbacks         Children in an array must be separated by commas    Children in an array must have a key to prevent React   s key warning    Strings must be wrapped in quotes       These are eliminated from the use of fragments  Here s an example of children wrapped in a fragment   render       return        lt  gt         lt ChildA   gt         lt ChildB   gt         lt ChildC   gt       lt   gt           which de-sugars into   render       return        lt React Fragment gt         lt ChildA   gt         lt ChildB   gt         lt ChildC   gt       lt  React Fragment gt           Note that the first snippet requires Babel v7 0 or above    Return an array  React v16 0  only    As of React v16  React Components can return arrays  This is unlike earlier versions of React where you were forced to wrap all sibling components in a parent component   In other words  you can now do   render       return   lt p key  0  gt foo lt  p gt    lt p key  1  gt bar lt  p gt        this transpiles into   return  React createElement  p    key  0    foo    React createElement  p    key  1    bar       Note that the above returns an array  Arrays are valid React Elements since React version 16 and later  For earlier versions of React  arrays are not valid return objects   Also note that the following is invalid  you must return an array    render       return   lt p gt foo lt  p gt   lt p gt bar lt  p gt         Wrap the elements in a parent element  The other solution involves creating a parent component which wraps the sibling components in its children  This is by far the most common way to address this issue  and works in all versions of React   render       return        lt div gt         lt h1 gt foo lt  h1 gt         lt h2 gt bar lt  h2 gt       lt  div gt           Note  Take a look again at the top of this answer for more details and how this transpiles

User · Answer

There is a rule in react that a JSX expression must have exactly one outermost element   wrong  const para          lt p gt  lt  p gt       lt p gt  lt  p gt       correct  const para          lt div gt           lt p gt  lt  p gt           lt p gt  lt  p gt       lt  div gt

User · Answer

It is late to answer this question but I thought It will add to the explanation  It is happening because any where in your code you are returning two elements simultaneously  e g return       lt div id  quot div1 quot  gt  lt  div gt       lt div id  quot div1 quot  gt  lt  div gt       It should be wrapped in a parent element  e g  return         lt div id  quot parent quot  gt           lt div id  quot div1 quot  gt  lt  div gt           lt div id  quot div1 quot  gt  lt  div gt         lt  div gt              More Detailed Explanation   Your below jsx code get transformed class App extends React Component     render        return          lt div gt           lt h1 gt Welcome to React lt  h1 gt         lt  div gt                into this  createClass App         key   render       value  function render           return React createElement           div           null          React createElement             h1             null             Welcome to React                                   But if you do this class App extends React Component     render        return            lt h1 gt Welcome to React lt  h1 gt           lt div gt Hi lt  div gt                this gets converted into this Just for illustration purpose  actually you will get error   Adjacent JSX elements must be wrapped in an enclosing tag   createClass App         key   render       value  function render           return React createElement           div           null          Hi                return React createElement             h1             null             Welcome to React                          In the above code you can see that you are trying to return twice from a method call  which is obviously wrong  Edit- Latest changes in React 16 and own-wards  If you do not want to add extra div to wrap around and want to return more than one child components you can go with React Fragments  React Fragments   lt React Fragments gt  are little bit faster and has less memory usage  no need to create an extra DOM node  less cluttered DOM tree   e g  In React 16 2 0  render       return        lt  gt         React fragments         lt h2 gt A heading lt  h2 gt        More React fragments         lt h2 gt Another heading lt  h2 gt        Even more React fragments       lt   gt          or render       return        lt React Fragments gt         React fragments         lt h2 gt A heading lt  h2 gt        More React fragments         lt h2 gt Another heading lt  h2 gt        Even more React fragments       lt  React Fragments gt          or render      return      quot Some text  quot      lt h2 key  quot heading-1 quot  gt A heading lt  h2 gt      quot More text  quot      lt h2 key  quot heading-2 quot  gt Another heading lt  h2 gt      quot Even more text  quot

User · Answer

Just add  lt  gt       code       lt   gt

User · Answer

Import view and wrap in View  Wrapping in a div did not work for me   import   View   from  react-native           render           return            lt View gt             lt h1 gt foo lt  h1 gt             lt h2 gt bar lt  h2 gt           lt  View gt

User · Answer

If you don t want to wrap it in another div as other answers have suggested  you can also wrap it in an array and it will work      Wrong  return         lt Comp1   gt      lt Comp2   gt      It can be written as      Correct  return           lt Comp1   gt        lt Comp2   gt       Please note that the above will generate a warning  Warning  Each child in an array or iterator should have a unique  key  prop  Check the render method of  YourComponent     This can be fixed by adding a key attribute to the components  if manually adding these add it like   return           lt Comp1 key  0    gt        lt Comp2 key  1    gt       Here is some more information on keys Composition vs Inheritance

User · Answer

If you do not wrap your component then you can write it as mentioned below method   Instead of   return     lt Comp1   gt     lt Comp2   gt            you can write this   return     lt Comp1   gt        lt Comp2   gt

User · Answer

it s very simple we can use a parent element div to wrap all the element  or we can use the Higher Order Component  HOC s   concept i e very useful for  react js applications  render       return        lt div gt         lt div gt foo lt  div gt         lt div gt bar lt  div gt       lt  div gt           or another best way is HOC its very simple not very complicated just add a file hoc js in your project and simply add these codes  const aux    props    gt  props children  export default aux    now import hoc js file where you want to use  now instead of wrapping with div  element we can wrap with hoc   import React    Component   from  react   import Hoc from           hoc        render           return        lt Hoc gt           lt div gt foo lt  div gt           lt div gt bar lt  div gt       lt  Hoc gt

User · Answer

React 16 0 0 we can return multiple components from render as an array   return         lt Comp1   gt        lt Comp2   gt        React 16 4 0 we can return multiple components from render in a Fragment tag  Fragment  return    lt React Fragment gt       lt Comp1   gt       lt Comp2   gt   lt  React Fragment gt      Future React you wil be able to use this shorthand syntax   many tools don   t support it yet so you might want to explicitly write  lt Fragment gt  until the tooling catches up    return    lt  gt       lt Comp1   gt       lt Comp2   gt   lt   gt

User · Answer

Invalid  Not only child elements  render            return               lt h2 gt Responsive Form lt  h2 gt               lt div gt Adjacent JSX elements must be wrapped in an enclosing tag lt  div gt               lt div className  col-sm-4 offset-sm-4  gt                   lt form id  contact-form  onSubmit  this handleSubmit bind this   method  POST  gt                       lt div className  form-group  gt                           lt label for  name  gt Name lt  label gt                           lt input type  text  className  form-control  id  name    gt                       lt  div gt                       lt div className  form-group  gt                           lt label for  exampleInputEmail1  gt Email address lt  label gt                           lt input type  email  className  form-control  id  email  aria-describedby  emailHelp    gt                       lt  div gt                       lt div className  form-group  gt                           lt label for  message  gt Message lt  label gt                           lt textarea className  form-control  rows  5  id  message  gt  lt  textarea gt                       lt  div gt                       lt button type  submit  className  btn btn-primary  gt Submit lt  button gt                   lt  form gt               lt  div gt                    Valid  Root element under child elements  render            return             lt div gt               lt h2 gt Responsive Form lt  h2 gt               lt div gt Adjacent JSX elements must be wrapped in an enclosing tag lt  div gt               lt div className  col-sm-4 offset-sm-4  gt                   lt form id  contact-form  onSubmit  this handleSubmit bind this   method  POST  gt                       lt div className  form-group  gt                           lt label for  name  gt Name lt  label gt                           lt input type  text  className  form-control  id  name    gt                       lt  div gt                       lt div className  form-group  gt                           lt label for  exampleInputEmail1  gt Email address lt  label gt                           lt input type  email  className  form-control  id  email  aria-describedby  emailHelp    gt                       lt  div gt                       lt div className  form-group  gt                           lt label for  message  gt Message lt  label gt                           lt textarea className  form-control  rows  5  id  message  gt  lt  textarea gt                       lt  div gt                       lt button type  submit  className  btn btn-primary  gt Submit lt  button gt                   lt  form gt               lt  div gt             lt  div gt

User · Answer

React element has to return only one element  You ll have to wrap both of your tags with another element tag   I can also see that your render function is not returning anything  This is how your component should look like   var app   React createClass       render                React element can only return one element           return                 lt div gt  lt  div gt                       Also note that you can t use if statements inside of a returned element   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              if this state submitted  false            return  lt YourJSX   gt        else           return  lt YourOtherJSX   gt

[javascript] Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag

Examples related to javascript

Examples related to reactjs

Examples related to render