Reactで一定回数クリックしたら数値が1に戻る定数を設定したい

Question

前提・実現したいこと

reactにてtodoアプリを作成しています。
そこで、categoryの値を増やすhandleStateIncreaseという関数を設定し、クリックするごとに未着手→進行中→完了となるようにしたいのですが、完了状態になったあとにクリックすると下記のエラーメッセージが出てしまいます。
そこで、クリックしてcategoryの数値が3になった(完了と表示される)あとにクリックすると1(未着手)の状態に戻るというようにしたいのですが、調べてもなかなかうまく行かなかったのでなにかアドバイスがほしいです。
よろしくおねがいします。

発生している問題・エラーメッセージ

TypeError
Cannot read property 'title' of undefined

該当のソースコード

import React, { useState, useMemo } from "react";

export default function App() {
  const initialState = {
    tasks: [
      {
        id: 1,
        title: "title",
        category: 1,
        text: ""
      }
    ],
    categories: [
      {
        id: 1,
        title: "未着手"
      },
      {
        id: 2,
        title: "進行中"
      },
      {
        id: 3,
        title: "完了"
      }
    ]
  };
  const [tasks, setTasks] = useState(initialState.tasks);
  const [categories, setCategories] = useState(initialState.categories);
  const defaultItem = () => ({ id: 1, title: item, category: 1, text: "" });
  const [item, setItem] = useState("");

  const handleNewitem = (e) => setItem(e.target.value);

  const handleSubmit = (e) => {
    e.preventDefault();
    if (item === "") return;
    setTasks((tasks) => [...tasks, defaultItem()]);
    setItem("");
  };

  const handleRemoveItem = (index) => {
    const newItems = [...tasks];
    newItems.splice(index, 1);
    setTasks(newItems);
  };

  //クリックしてcategoryの数値が3になった(完了と表示される)あとにクリックすると1(未着手)の状態に戻る
  const handleStateIncrease = (index) => {　　
    if (index > 3) return;
    const newTasks = [...tasks];
    newTasks[index].category++;
    setTasks(newTasks);
  };

  const [filterQuery, setFilterQuery] = useState({});

  const filteredTask = useMemo(() => {
  
    let tmpTasks = tasks;

    tmpTasks = tmpTasks.filter((row) => {
      if (
        filterQuery.category_id &&
        row.category !== parseInt(filterQuery.category_id)
      ) {
        return false;
      }
      return row;
    });

    return tmpTasks;
  }, [filterQuery, tasks]);

  const handleFilter = (e) => {
    const { name, value } = e.target;
    setFilterQuery({ ...filterQuery, [name]: value });
  };

  return (
    <div className="wrap">
      <div className="input-group">
        <form onSubmit={handleSubmit}>
          <input
            value={item}
            placeholder="Enterを押してください"
            onChange={handleNewitem}
          />
          [追加]
        </form>
      </div>
      <div className="input-group">
        <div className="selectbox"></div>
      </div>

      <table>
        <thead>
          <tr>
            <th>[タイトル]</th>
            <th>[カテゴリー]</th>
          </tr>
        </thead>

        <tbody>
          {filteredTask.map((task, index) => {
            return (
              <tr key={task.id}>
                <td>
                  {task.title}
                </td>
                <td>
                  <span onClick={() => handleStateIncrease(index)}>
                    {task.category
                      ? categories.find((c) => c.id === task.category).title
                      : ""}
                  </span>
                </td>
                <td>
                <button onClick={() => handleRemoveItem(index)}>削除</button>
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

試したこと

if文を使った条件分岐をさせようとしましたが今度はクリックしても反応しませんでした。

補足情報（FW/ツールのバージョンなど）

OS　Mac
node -v
v14.17.0

Answer 1

集合X = {1, 2, 3} として、Xで定義される1to1かつontoな関数 f

• f(1)= 2
• f(2)= 3
• f(3)= 1

を演算式で書くとすれば、f(x) = x % 3 + 1 と書けます。これを使えば、newTasksを作ってsetTasksするこの３行

const newTasks = [...tasks];
newTasks[index].category++;
setTasks(newTasks);

は、以下でいけるんちゃいます？

setTasks(tasks.map((task, i) => ({
  ...task,
  category: i !== index ? task.category : (task.category % 3 + 1)
})));

Comments

[nto300002]

すごい！無事に解決できました！ありがとうございます！！！

[退会済みユーザー]

おおきにですぅ〜　
大変おこがましいですけど、業務でのReact経験約4年半のワテからみて、nto300002さんの質問にあるコートの良い点が２つ：

(1) onChangeやonClick に設定する各コールバックを入れておく変数名を、onXxxx ではなく handle をプレフィックスにして、handleXxxx にしている点

※ただし、人によっては、「別にhandleXxxxじゃなくても onXxxxでいいでしょ？」派もいる。そういう人がテックリードだったりコードレビューする人だったりする場合もあるので、そこは適宜、うまいこと空気読んで合わせる。

(2) filteredTask をmapして作る各行の tr に、<tr key={task.id}> と、ちゃんとkey が書いてあって、かつ、map((task, index) の idex を使っての <tr key={index}> にしていない点

そして余計なお節介をひとつ：

Reactというフレームワークの使い方とかお作法は、知識として調べて覚えることなので、やっていけばだんだんと身につきます。

なので、実務レベルで要件を満たすコンポーネントを書くときに試されるのは、今回でいえばsetTasksに渡す、新しいステイトを古いステイトから作るところをササッと、かつわかりやすいコードで書けるかどうかだったりします。（今後Reduxを使う機会があればちょっと込み入ったreducerを書くときなど）これはReactのお作法とは関係のない、JavaScript自体に関しての基礎力をベースにしたコーディング力ともいうべきものです。ひらたく言うと個人技の出やすい「腕の見せどころ」のひとつですわ。

気張ってや〜

[nto300002]

変数名の命名とkeyの設定ですね！ありがとうございます。
とてもありがたいお褒めの言葉を頂き恐縮です。
ただ、上記のコードは大半がコピペなので、自分でもこれくらいのコードが書けるようにがんばります。。