うさぎのイラスト

ネットアンサー55備忘録

web技術を書いていきます

Reactで使用するjavascripit

-2023年02月19日-

map

1const 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}
1const 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}

filter

一致したものだけ配列として作成する。

1const newTodos = todos.filter((todo) => !todo.completed);

find

見つかったtodoはnewTodosの中の一致したものを参照している。

1const newTodos = [...todos];
2const todo = newTodos.find((todo) => todo.id === id);