Reactでindexを元になんやかんや処理をしたい

Question

前提・実現したいこと

こんにちは！reactでtodoアプリを作っています。
子コンポーネントでmap関数を使い、親コンポーネントから渡ってきた
useStateのオブジェクトをループさせました。

useStateの内容↓

 const [todos, setTodos] = useState([
    {
      text: 'Click todo to edit',
      isComplete: false,
    },
    {
      text: 'Tick the todo to set to done',
      isComplete: false,
    },
    {
  ]);

その後得たindexを元にクリックされたものだけを親コンポーネントで
isComplete:trueに書き換えたいのですが
どのようにindexを用いて書き換えればいいのかがわかりません。。

一応、わたしが書いたコードも載せておきます。
分かる方回答いただけますととても嬉しいです！！

＊子コンポーネント

<i
 className={
 todo.isComplete
 ? 'c-icon p-listItem__iconTick fas fa-check-circle'
 : 'c-icon p-listItem__iconTick far fa-check-circle'
            }
  aria-hidden='true'
  onClick={() => onClickToggleComplete(index)}>
</i>

＊親コンポーネント

  const onClickToggleComplete = (index) => {
    const newTodo = [{ ...todos, isComplete: true }];
    setTodos(newTodo);
    // setTodos({ isComplete: true });
  };

Answer 1

ほーん。。。つまりあれやろ？ onClickToggleCompletemのnewTodo作るとこがうまくいかへんのやろ？ こない

    const newTodos = todos.map((todo, i) => ({
      ...todo, 
      isComplete: i === index ? !todo.isComplete : todo.isComplete
    }));

    setTodos(newTodos);

にしたらどうや？ ➡　サンプル

悪いことは言わん。変数名は上みたくnewTodo やなしに、複数形のsつけて newTodos にしといたって。変数名の単数形と複数形ゆう細かいとここだわれんと、周りのやつらから「コイツ英語できねえｗ」みたいにマウントされてしまうからのう。

Comments

[mii--]

コードまで書いていただいてありがとうございます！mapでもう一度回して判定してあげたらよかったんですね！自分一人では検索をたくさんしても答えが出ず途方にくれてたので助かったと同時にとても勉強になりました。英語の指摘もありがとうございます。suwmnさんみたいな上司がいてくれたらなと思います。

[退会済みユーザー]

おおきに〜。頑張ってな〜