Please help. Cannot pass the challenge due to "build error". Challenge: Use React to Render Nested Components

[bkuberlinov]

Tell us what’s happening:
Please help me to solve the problem. I cannot pass the challenge due to some error. Although my code is correct, the console displays “Build error, open your browser console to learn more”.
The browser that I use is GoogleChrome.
The browser console displays following:

Grammarly-check.js:2 Uncaught TypeError: Cannot read property ‘dataset’ of null
at Object.t.init (VM217 Grammarly-check.js:2)
at Function.t.start (VM217 Grammarly-check.js:2)
at VM217 Grammarly-check.js:2
at VM217 Grammarly-check.js:2
at VM217 Grammarly-check.js:2
t.init @ Grammarly-check.js:2
t.start @ Grammarly-check.js:2
(anonymous) @ Grammarly-check.js:2
(anonymous) @ Grammarly-check.js:2
(anonymous) @ Grammarly-check.js:2
react-dom.production.min.js:110 ReferenceError: TypeOfFruit is not defined
at Fruits (use-react-to-render-nested-components:32)
at wh (react-dom.production.min.js:95)
at kg (react-dom.production.min.js:120)
at lg (react-dom.production.min.js:120)
at fc (react-dom.production.min.js:127)
at vb (react-dom.production.min.js:126)
at ub (react-dom.production.min.js:126)
at vd (react-dom.production.min.js:124)
at ra (react-dom.production.min.js:123)
at Fd (react-dom.production.min.js:138)
ag @ react-dom.production.min.js:110
c.callback @ react-dom.production.min.js:115
If @ react-dom.production.min.js:73
Jf @ react-dom.production.min.js:74
ic @ react-dom.production.min.js:135
fc @ react-dom.production.min.js:127
vb @ react-dom.production.min.js:126
ub @ react-dom.production.min.js:126
vd @ react-dom.production.min.js:124
ra @ react-dom.production.min.js:123
Fd @ react-dom.production.min.js:138
jc @ react-dom.production.min.js:138
Ta.render @ react-dom.production.min.js:193
(anonymous) @ react-dom.production.min.js:141
Ed @ react-dom.production.min.js:136
lc @ react-dom.production.min.js:141
render @ react-dom.production.min.js:194
(anonymous) @ use-react-to-render-nested-components:60

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 */ }
 <TypeOfFruit />
    { /* 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 */ }
  <Fruits />
      { /* Change code above this line */ }
    </div>
  );
}
};

Thank you in advance people!

Your browser information:

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

Challenge: Use React to Render Nested Components

Link to the challenge:

freeCodeCamp.org

[sitek94]

You have a typo:

const TypesOfFruit = () => { 

...

// Missing "s":
<TypeOfFruit />

[bkuberlinov]

Oh!) Thank you very much! My bad)
Such a silly mistake. I thought something is wrong with my browser.

[sitek94]

Don’t worry, error messages can be hard to decrypt sometimes

This is the part that was the most important:

ReferenceError: TypeOfFruit is not defined at Fruits (:32:89)

[DanCouper]

I would turn off the Grammarly extension for the FCC site as well, it injects HTML which does iterfere with stuff, you don’t need it on in this case.

[bkuberlinov]

Thanks. That is true!)