Compose React Components

Compose React Components

QA status: Review Complete

Challenge: Compose React Components

Intro: As the challenges continue to use more complex compositions with React components and JSX, there is one important point to note. Rendering ES6 style class components within other components is no different than rendering the simple components you used in the last few challenges. You can render JSX elements, stateless functional components, and ES6 class components within other components.

Instructions: In the code editor, the TypesOfFood component is already rendering a component called Vegetables. Also, there is the Fruits component from the last challenge. Nest two components inside of Fruits — first NonCitrus, and then Citrus. Both of these components are provided for you in the background. Next, nest the Fruits class component into the the TypesOfFood component, below the h1 header and above Vegetables. The result should be a series of nested components, which uses two different component types.

Leave a Reply

Your email address will not be published. Required fields are marked *