Not sure what I'm doing wrong in "Use React to Render Nested Components" challenge

JavaScript
1

https://learn.freecodecamp.org/front-end-libraries/react/use-react-to-render-nested-components

I’ve completed all of the criteria except for “The TypesOfFood component should return the Fruits component.” I called TypesOfFruit in Fruit as such:

{TypesOfFruit()}

But calling Fruit in TypesOfFood the same way doesn’t work:

{Fruits()}

I’ve tried variations, like {this.Fruits()} or {this.state.Fruits()} but nothing works. How am I supposed to call it?

2

First things first, please post your question related to challenge using that challenge link.

Second, you need to nest child components inside other class/Parent Components not like function calls.

eg:

class Parent extends Component {
 {/* child components */}
render() {
  return (
   <div>
     <TypesOfFood />  // Child Component
     <Fruits /> // this contains other Nested Components
    </div>
   );
 }
}
1 Like
3

Sorry, edited OP to include link. And thanks, that worked!