Learn

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}.

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?