Unknown Adjacent JSX elements when using curly brackets to compose React components

I am working with React and I am wondering why curly brackets will cause unknown adjacent JSX element errors when rendering classes inside of one another.

In the challenge, we are provided with curly brackets. However, the use of curly brackets is causing an error within the Fruits class when composing. The TypesOfFood of food class does not provide this error.

class Fruits extends React.Component {
constructor(props) {
  super(props);
}
render() {
  return (
    <div>
      <h2>Fruits:</h2>
      {
      <NonCitrus/>
      <Citrus/>
      }
    </div>
  );
}
};

class TypesOfFood extends React.Component {
constructor(props) {
   super(props);
}
render() {
  return (
    <div>
      <h1>Types of Food:</h1>
      { /* Change code below this line */ 
      <Fruits/>
      }

      { /* Change code above this line */ }
      <Vegetables />
    </div>
  );
}
};
  **Your browser information:**

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 14150.74.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.114 Safari/537.36

Challenge: Compose React Components

Link to the challenge:

Hi @michaelnicol !

When you have multiple components you need to wrap them in a div or React Fragment.

  <>
       <NonCitrus />
       <Citrus />
  </>
1 Like