1. 20
    Redux: Extracting Presentational Components (Todo, TodoList)
    4m 52s

Redux: Extracting Presentational Components (Todo, TodoList)

InstructorDan Abramov

Share this video with your friends

Send Tweet

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

Liang
Liang
~ 5 years ago

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

<ul> {todos.map(todo => <Todo key={todo.id} {...todo} onClick={() => onTodoClick(todo.id)} /> )} </ul> );

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

Dan Abramov
Dan Abramov(instructor)
~ 5 years ago

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.

Irvin Waldman
Irvin Waldman
~ 5 years ago

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

joyfeel
joyfeel
~ 5 years ago

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?

Dan Abramov
Dan Abramov(instructor)
~ 5 years ago

Sure, you can. Both approaches work fine.

jpbamberg1993
jpbamberg1993
~ 4 years ago

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

Jiwon
Jiwon
~ 4 years ago

I think don't need key={todo.id} props in Todo component right?

Przemysław
Przemysław
~ 4 years ago

You are right you assign all pros from state (todo) via spread operator {...todos}