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

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


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


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

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.


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

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