Learn
Container Components From Presentational Components
Render Presentational Component in Container Component

We now have a container component (containers/GuineaPigsContainer.js) for logic and a presentational component (components/GuineaPigs.js) for rendering JSX!

The container component should now render the presentational component instead of rendering JSX.

Instructions

1.

Select containers/GuineaPigsContainer.js.

On line 12, change the component class’s name from GuineaPigs to GuineaPigsContainer. In the ReactDOM.render() call near the bottom of the file, change <GuineaPigs /> to <GuineaPigsContainer />.

2.

GuineaPigsContainer contains a lot of logic. It shouldn’t also have to render JSX.

Delete any JSX from GuineaPigsContainer‘s return statement in the render function. Instead, return an instance of GuineaPigs.

The new render function should look like this:

render() { const src = GUINEAPATHS[this.state.currentGP]; return <GuineaPigs />; }
3.

Once your container component has chosen a guinea pig, it must pass that guinea pig to the presentational component.

In GuineaPigsContainer‘s render function, pass the chosen guinea pig by giving <GuineaPigs /> a prop of src = {src}.

Folder Icon

Take this course for free

Already have an account?