In this lesson, you will learn a programming pattern that will help organize your React code.
As you continue building your React application, you will soon realize that one component has too many responsibilities, but how do you know when you have reached that point?
Separating container components from presentational components helps to answer that question. It shows you when it might be a good time to divide a component into smaller components. It also shows you how to perform that division.
Instructions
Click Run. You are looking at a rendered <GuineaPigs /> component.
<GuineaPigs />‘s job is to render a photo carousel of guinea pigs. It does this perfectly well! And yet, it has a problem: it does too much stuff. How might we divide this into a container component and a presentational component?