Intro to React > Wrapping sibling elements

Wrapping sibling elements

If you added the <p> element directly after the <h1>, you may have got this error: Adjacent JSX elements must be wrapped in an enclosing tag. This is because React doesn't allow sibling elements to be rendered without a container element wrapping them. You can see we've rendered a <div> wrapped around the <h1> and <p>. You can say that the header and the paragraph elements are now nested within the <div> container.

This will render an extra element, but if you don't want to do that, you can use a Fragment, which you can see in the next lesson.

Lesson 3/22

export default function App() {
  return (
    <div>
      <h1> 🏴‍☠️ Captain's Tasks </h1>
      <p> Manage the daily jobs at sea </p>
    </div>
  );
}

Open Sandbox