If you get this error in React js "Adjacent JSX elements must be wrapped in an enclosing tag" happens if you have multiple elements being returned in a component.
In order to solve the problem, just wrap all elements in a parent element.
Don't do this:
export default class App extends Component {
render() {
return (
<h1>Header</h1>
<p>content</p>
)
}
}
Do this:
export default class App extends Component {
render() {
return (
<div>
<h1>Header</h1>
<p>content</p>
</div>
)
}
}
or this:
export default class App extends Component {
render() {
return (
<>
<h1>Header</h1>
<p>content</p>
</>
)
}
}
Check to ensure that you have an opening and closing tag on the parent element.
Enjoy!