Can someone tell me how to solve this lesson?

Curriculum Help
1

Tell us what’s happening:
I try so many things but none of them is right, so I need help with this.
Can someone write the answer?

Your code so far


const TypesOfFruit = () => {
return (
  <div>
    <h2>Fruits:</h2>
    <ul>
      <li>Apples</li>
      <li>Blueberries</li>
      <li>Strawberries</li>
      <li>Bananas</li>
    </ul>
  </div>
);
};

const Fruits = () => {
return (
  <div>
    { /* change code below this line */ }

    { /* change code above this line */ }
  </div>
);
};

class TypesOfFood extends React.Component {
constructor(props) {
  super(props);
}

render() {
  return (
    <div>
      <h1>Types of Food:</h1>
      { /* change code below this line */ }

      { /* change code above this line */ }
    </div>
  );
}
};

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36.

Challenge: Use React to Render Nested Components

Link to the challenge:

2

We won’t give you the answer but we can help you fix your code.

3

Hello, these are your identified errors,

2:7 error 'TypesOfFruit' is assigned a value but never used. (no-unused-vars)
3:3 error 'React' must be in scope when using JSX (react/react-in-jsx-scope)
4:5 error 'React' must be in scope when using JSX (react/react-in-jsx-scope)
5:5 error 'React' must be in scope when using JSX (react/react-in-jsx-scope)
6:7 error 'React' must be in scope when using JSX (react/react-in-jsx-scope)
7:7 error 'React' must be in scope when using JSX (react/react-in-jsx-scope)
8:7 error 'React' must be in scope when using JSX (react/react-in-jsx-scope)
9:7 error 'React' must be in scope when using JSX (react/react-in-jsx-scope)
14:7 error 'Fruits' is assigned a value but never used. (no-unused-vars)
15:3 error 'React' must be in scope when using JSX (react/react-in-jsx-scope)
22:1 error Component should be written as a pure function (react/prefer-stateless-function)
22:7 error 'TypesOfFood' is defined but never used. (no-unused-vars)
22:27 error 'React' is not defined. (no-undef)
23:3 error Useless constructor. (no-useless-constructor)
29:7 error 'React' must be in scope when using JSX (react/react-in-jsx-scope)
30:9 error 'React' must be in scope when using JSX (react/react-in-jsx-scope)