{"id":140,"hash":"b87a01ba1160471517f1fb8893db59f401decfefd21c5dda7d2edae905f8928b","pattern":"Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag","full_message":"I am trying to set up my React.js app so that it only renders if a variable I have set is true.  \n\nThe way my render function is set up looks like:\n\nrender: function() {\n    var text = this.state.submitted ? 'Thank you!  Expect a follow up at '+email+' soon!' : 'Enter your email to request early access:';\n    var style = this.state.submitted ? {\"backgroundColor\": \"rgba(26, 188, 156, 0.4)\"} : {};\n    return (\n    <div>\n\nif(this.state.submitted==false) \n{\n\n      <input type=\"email\" className=\"input_field\" onChange={this._updateInputValue} ref=\"email\" value={this.state.email} />\n\n      <ReactCSSTransitionGroup transitionName=\"example\" transitionAppear={true}>\n      <div className=\"button-row\">\n         <a href=\"#\" className=\"button\" onClick={this.saveAndContinue}>Request Invite</a>\n     </div>\n     </ReactCSSTransitionGroup>\n}\n   </div>\n    )\n  },\n\nBasically, 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).  \n\nBut when running this, I get the error in the question:\n\n  Uncaught Error: Parse Error: Line 38: Adjacent JSX elements must be wrapped in an enclosing tag\n\nWhat is the issue here?  And what can I use to make this work?","ecosystem":"npm","package_name":"reactjs","package_version":null,"solution":"You should put your component between an enclosing tag, Which means:\n\n// WRONG!\n\nreturn (  \n    <Comp1 />\n    <Comp2 />\n)\n\nInstead:\n\n// Correct\n\nreturn (\n    <div>\n       <Comp1 />\n       <Comp2 />\n    </div>\n)\n\nEdit: Per Joe Clay's comment about the Fragments API\n\n// More Correct\n\nreturn (\n    <React.Fragment>\n       <Comp1 />\n       <Comp2 />\n    </React.Fragment>\n)\n\n// Short syntax\n\nreturn (\n    <>\n       <Comp1 />\n       <Comp2 />\n    </>\n)","confidence":0.95,"source":"stackoverflow","source_url":"https://stackoverflow.com/questions/31284169/parse-error-adjacent-jsx-elements-must-be-wrapped-in-an-enclosing-tag","votes":599,"created_at":"2026-04-19T04:41:23.142450+00:00","updated_at":"2026-04-19T04:51:05.198370+00:00"}