Forward Advance Learning

Presentational vs. Container React Components

Say we have a component that manipulates data before rendering it. Perhaps we have an array, like this one:

const heros = [
{id: 1, name: "Marvyn Marvolo", type: "Wizard", maxHp: 12, hp: 12, armour: 3, attack:45},
{id: 2, name: "Haldane Rendall", type: "Swordsman", maxHp: 36, hp: 36, armour: 33, attack:12},
{id: 3, name: "Hylo Kitoma", type: "Rogue", maxHp: 21, hp: 21, armour: 12, attack:45},
{id: 4, name: "Oeliera Chordae", type: "Mystic", maxHp: 24, hp: 24, armour: 2, attack:99}
]

I'd like to be able to show and sort this list. I have three ways to do this:

Sort in the Heros Function (naive)

I could sort the data right in the render function. This works, but it feels a bit dirty. I've mixed my logic all up inside my front end, and my component now looks ugly.

See the Pen React Presentation Components Demo (Before) by Nicholas Johnson (@superluminary) on CodePen.

A Better Solution - Container Components

The problem above is that we have a big old switch statement right inside my component. I could pull this switch up into The app component, but this is really not an improvement.

A better solution is a container component. This modifies the props, and then passes the data right back down into the presentation component. Here we have a new component called SortedHeros. It does the sorting, then immediately shells out to the Heros component.

We call this a container component. Notice how the container contains no JSX at all. I've kept them completely separate.

See the Pen React Presentation Components Demo (After) by Nicholas Johnson (@superluminary) on CodePen.

Exercise

Add sort buttons to your TODO app. Create a Sorted Todos component that will handle the sorting, and pass it to the todo list.