Compose React Components
Hints
Hint 1
Use nested components as in the previous challenge to render components.
Solutions
Solution 1 (Click to Show/Hide)
The following is the solution to the challenge, where it render Citrus and NonCitrus in a component which is then rendered in another:
class Fruits extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<h2>Fruits:</h2>
<NonCitrus />
<Citrus />
</div>
);
}
};
class TypesOfFood extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<h1>Types of Food:</h1>
<Fruits />
<Vegetables />
</div>
);
}
};