CYBER WEEK SALE: Get 50% off your Pro annual membership using code [CYBER23](https://www.codecademy.com/checkout?periods=year&plan_id=proGoldAnnualV2&discountCode=CYBER23)


Learn your second programming pattern: separating presentational components from display components.

Container Components From Presentational Components

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.

Remove Logic from Presentational Component

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.

Render Presentational Component in Container Component

Separating container components from presentational components is a popular React programming pattern. It is a special application of the concepts learned in the [Stateless Components From Stateful Components](https://www.codecademy.com/courses/react-102/lessons/stateless-inherit-stateful-intro/exercises/stateless-inherit-stateful) module.

If a component has to have state, make calculations based on props, or manage any other complex logic, then that component shouldn’t also have to render HTML-like JSX.
 
The functional part of a component (state, calculations, etc.) can be separated into a _container component_.

Create Container Component

Congrats! You divided the `GuineaPigs` component into a container component and a presentational component: **containers/GuineaPigsContainer.js** and **components/GuineaPigs.js**. 

Here are the steps we took:

1. Identified that the original component needed to be refactored: it was handling both calculations/logic and presentation/rendering
2. Copied the original component to a new **containers/** folder and renamed it `GuineaPigsContainer`
3. Removed all of the presentation/rendering code from the container component
4. Removed all of the calculation/logic code from the presentational component
5. Accessed the presentational component from within the container using `import` and `export`
6. Edited the container's `render()` method to render the presentational component with the proper props

In this programming pattern, the container component does the work of figuring out what to display. The presentational component does the work of actually displaying it. If a component does a significant amount of work in both areas, then that’s a sign that you should use this pattern!

If you'd like to learn more about this pattern, here are some articles to start with:
* [Container Components](https://medium.com/@learnreact/container-components-c0e67432e005)
* [Presentational and Container Components](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0)

Review

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.

Separate Container Components From Presentational Components

Now that we've created a container component for the logic, we can dedicate the original component, `GuineaPigs`, to be a presentational component.

The presentational component's only job is to contain HTML-like JSX. It should be an exported component and will not render itself because a presentational component will always get rendered by a container component.

As a separate example, say we have `Presentational` and `Container` components. **Presentational.js** must export the component class (or function, when applicable):

```js
export class Presentational extends Component {
```

**Container.js** must import that component:

```js 
import { Presentational } from 'Presentational.js';
```