- 20Redux: Extracting Presentational Components (Todo, TodoList)4m 52s
Redux: Extracting Presentational Components (Todo, TodoList)
Share this video with your friends
Learn how to separate the looks from the behavior by extracting presentational components.
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?
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.
Really like the functional component signature pattern. Code is very clean and precise.
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?
Sure, you can. Both approaches work fine.
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
I think don't need key={todo.id} props in Todo component right?
You are right you assign all pros from state (todo) via spread operator {...todos}