1 | const GoalCard = (props) => { |
2 |
3 | return ( |
4 | <ul> |
5 | {cards.map((card) => ( |
6 | <li>{card.name}、{card.age}、{card.gender}</li> |
7 | ))} |
8 | </ul> |
9 | ); |
10 | } |
1 | const TodoList = ({ todos, toggleTodo }) => { |
2 |
3 | return ( |
4 | <ul> |
5 | {todos.map((todo,index) => ( |
6 | <Todo todo={todo} toggleTodo={toggleTodo} index = {index} key={todo.id} /> |
7 | ))} |
8 | </ul> |
9 | ) |
10 | } |
一致したものだけ配列として作成する。
1 | const newTodos = todos.filter((todo) => !todo.completed); |
見つかったtodoはnewTodosの中の一致したものを参照している。
1 | const newTodos = [...todos]; |
2 | const todo = newTodos.find((todo) => todo.id === id); |