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

by

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

// WRONG!

return (  
    <Comp1 />
    <Comp2 />
)

Instead:

// Correct

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

Edit: Per Joe Clay’s comment about the Fragments API

// More Correct

return (
    <React.Fragment>
       <Comp1 />
       <Comp2 />
    </React.Fragment>
)

// Short syntax

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

More Related Contents:

  1. How to Call a Function inside a Render in React/Jsx
  2. How to Protect website code PHP / JS? [closed]
  3. Nested routes with react router v4 / v5
  4. Why does useState cause the component to render twice on each update?
  5. What is the difference between state and props in React?
  6. React hooks – right way to clear timeouts and intervals
  7. How to set state of response from axios in react
  8. How to import a CSS file in a React Component
  9. How can I return multiple lines JSX in another return statement in React?
  10. Removing element from array in component state
  11. React: how to load and render external html file?
  12. Binding vs Arrow-function (in JavaScript, or for react onClick)
  13. How to allow CORS in react.js?
  14. How To Solve The React Hook Closure Issue?
  15. body data not sent in axios request
  16. css position absolute making the textbox go down
  17. Can’t resolve module (not found) in React.js
  18. React-router v4 – cannot GET *url*
  19. Rendering an array.map() in React
  20. Does new React Context API trigger re-renders?
  21. map function not working in React
  22. Why I receive blank page? React
  23. How to restrict access to routes in react-router?
  24. Detect scroll direction in React js
  25. How to check for broken images in React JS
  26. Why is it necessary to use bind when working with ES6 and ReactJS?
  27. Only numbers. Input number in React
  28. Disable chrome react DevTools for production
  29. You’re importing a component that needs useState. It only works in a Client Component, but none of its parents are marked with “use client”
  30. How can I redirect in React Router v6?

Leave a Comment