The TypesOfFood component should return the Fruits component

JavaScript
1

Tell us what’s happening:

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 (
  
);
};

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

render() {
  return (
    <div>
      <h1>Types of Food:</h1>
       <h2>Fruits:</h2>
      <ul>
      <li>Apples</li>
      <li>Blueberries</li>
      <li>Strawberries</li>
      <li>Bananas</li>
    </ul>
    </div>
  );
}
};

Your browser information:

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

Challenge: Use React to Render Nested Components

Link to the challenge:

2

The only two lines of code you need to add are:

<TypesOfFruit />
<Fruits />

Add the <TypesOfFruit /> component inside the Fruits component return statment (between the comment blocks).

Add the <Fruits /> component inside the TypesOfFood component return statment (between the comment blocks).

The components are functions that return a value and the component implementation (usage) is like a function call.

Plain JS:

const firstName = () => {
  return 'John';
}

const lastName = () => {
  return 'Doe';
}

// Function composition
const user = () => {
  return firstName() + ' ' + lastName();
}

const app = () => {
  return user();
}

console.log(app()); // John Doe (this is the "render")

React:

// App.js
import React from "react";

const FirstName = () => {
  return <h2>John</h2>;
}

const LastName = () => {
  return <h2>Doe</h2>;
}

// Component composition
const User = () => {
  return (
    <div>
      {/* Think of it like function calls FirstName(), LastName() */}
      <FirstName />
      <LastName />
    </div>
  )
}

export const App = () => {
  return <User />;
}

// index.js
// The render, less important to focus on here
import React from "react";
import ReactDOM from "react-dom";

import { App } from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);