The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Redux: Extracting Presentational Components (Todo, TodoList)

Redux: Extracting Presentational Components (Todo, TodoList)

4:52
Learn how to separate the looks from the behavior by extracting presentational components.
Watch this lesson now
Avatar
egghead.io

Learn how to separate the looks from the behavior by extracting presentational components.

Avatar
Liang

const TodoList = ({
todos,
onTodoClick
}) => (

{todos.map(todo =>
onTodoClick(todo.id)}
/>
)}

);

Would define a component ''? So no need to do class TodoList extend xxx?

Avatar
Dan Abramov

Yes, this is functional component signature. The support for functional components was added to React 0.14. Functional components are defined as functions of their props, and they can't have state or lifecycle hooks like componentDidMount. In the new code it's best to use them when possible.

In reply to Liang
Avatar
Irvin

Really like the functional component signature pattern. Code is very clean and precise.

In reply to Dan Abramov
Avatar
joyfeel

The three layer onClick callback event really confused me.

Could I just pass down the onTodoClick props from TodoList component to Todo component, and called by Todo component.

Like:
https://jsbin.com/xatafixuke/1/edit?html,js,output

Does it make sense or not?

Avatar
Dan Abramov

Sure, you can. Both approaches work fine.

In reply to joyfeel
Avatar
jpbamberg1993

I have found a typo in the transcript:
{todos.map(todo =>
<Todo
key={todo.id}
{...todo}
onClick{() => onTodoClick(todo.id)}
/>
)}

onClick needs an = before the function

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?