Fix – jsx expressions must have one parent element

This article will help you to fix jsx expressions must have one parent element error on React.

The main reason this error happened is that you try to return a JSX expression with two (or more) elements as a root. It said, the component looks like this:

const MyComponent = () => {
  return (
     <div>Element 1</div>
     <div>Element 1</div>
)};

This can be fixed by wrapping the component with one single tag, we can use <React.Fragment /> or simply use the short syntax <></>. Here is the example:

const MyComponent = () => {
  return (
     <>
       <div>Element 1</div>
       <div>Element 1</div>
     </>
)};