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