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