Our container component now renders the GuineaPigs presentational component instead of JSX statements!

The last step to separating the container component from the presentational component is to remove redundant logic in the presentational component. The presentational component should be left with the render function that contains JSX statements.



Select components/GuineaPigs.js.

This component’s only job is to render HTML-like JSX. Delete everything inside of the GuineaPigs component class, except for the render function. When you’re done, the class should only have one method: render()!

Inside of the render() function, delete this line of logic:

let src = GUINEAPATHS[this.state.currentGP];

…and replace it with this:

let src = this.props.src;

Lastly, delete the GUINEAPATHS array.

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?