Check out a free preview of the full Advanced State Management in React (feat. Redux and MobX) course:
The "Container Pattern Exercise" Lesson is part of the full, Advanced State Management in React (feat. Redux and MobX) course featured in this preview video. Here's what you'd learn in this lesson:

Create your own container and presentational component in this exercise.

Get Unlimited Access Now

Transcript from the "Container Pattern Exercise" Lesson

[00:00:03]
>> Steve Kinney: Let's take a look at what your mission is. So I have a very similar but different app, right. Which is a pizza calculator and the pizza calculator is gonna take two things, which is the number of guests and the slices per person and it tells you how many pizzas that you need to order.

[00:00:21] Right. By rounding up because if you can't order two and a half pizzas. That's not a thing. And so we can hit reset and change it back. Let's look at the code for this real quick.
>> Steve Kinney: So the code as it is right now.
>> Steve Kinney: We've got the application which is effectively the entire component.

[00:00:42] Which takes an initial state of the number of people and slices. And handles it all in that component. Our goal, and frankly to keep things simple, you don't even have to break this out into another file, right? Let's, we've effectively have the container in this case. What we wanna do is break out the presentational component.

[00:01:00] So right now, we have this component here, which is using all of the state, we wanna pull this out. We wanna pull this out into a presentational component. You can write it as a stateless functional component, you can write it as just a component that has a render function.

[00:01:15] You can pull it out, and effectively be able to pass in all of the props to it. Let's go back to the pizza calculator. Clearly it's got an update the number of people. This is to update slice per person. These are now gonna be ones that are passed in.

[00:01:32] We're gonna rip out,effectively what's gonna return out of the render method is simply our pizza calculator component that is gonna receive everything that it needs. So this will simply render pizza calculator, pass it in, all of this state and all these methods for modifying the state in as prompts, sound good?

[00:01:52] All right, let's spend 15 minutes and then we'll round back and we'll do it together.
>> Speaker 2: Can we actually do 20 so we can-
>> Steve Kinney: 20.
>> Speaker 2: Evolve the full technical issue-
>> Steve Kinney: 20 minutes. [LAUGH]