Container Components From Presentational Components
Remove Logic from Presentational Component

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.

Folder Icon

Take this course for free

Already have an account?