I cant able to solve this problem...plzz help

JavaScript
1

help!!!
I cant able to do this problem

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 */ }
       <h2/>
    { /* 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 */ }
     
      <ul/>

      { /* 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/80.0.3987.149 Safari/537.36.

Challenge: Use React to Render Nested Components

Link to the challenge:

2

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums

3

1st of all u need to Google the therms: " functional components and class components "

2nd when you understand how each works , return to this answer .

Example of nesting TypesOfFruit in Fruits , then nesting Fruits in TypesOfFood

1 Like
4

Thank you for your response but i already cracked the challange.

5

You have three components . Two functional components and one state components. That two functional company is also returning JSX. But you can’t see that on browser. Why? Try to figure out this part. Invoke that function into somewhere. Somewhere??:grinning: