reactでfetchしたデータから検索機能を作りたい

Question

react in typescriptでfetchしたデータから検索検索きる機能を作ろうとしています

const [searchKeyword, setSearchKeyword] = useState("");
const [tasks, setTasks] = useState([]);

const url = "https://jsonplaceholder.typicode.com/todos";
  const fetchTasks = () => {
    fetch(url)
      .then((res) => res.json())
      .then((data) => {
        setTasks(data);
      });
  };

 useEffect(() => {
    fetchTasks();
  }, []);

const filterTask = () => {
    const result = tasks.filter((task: TaskType) => {
      return task.title == searchKeyword;
    });
    setTasks(result);
  };

  const handleSeekDone = () => {
    fetchTasks();
    const doneTask = [...tasks];
    const result = doneTask.filter((task: TaskType) => {
      return task.completed == false;
    });
    const doneTasks = [...result];
    setTasks(doneTasks);
  };

考えていること

filterTaskではuseStateのsearchKeywordに入ってきた文字列に一致するものをtasks配列に格納したいのですが、挙動としまして完全一致のものが残ってしまします。

したいこととしましては例えばtasksが["cat","dog","horse"]でしたらsearchKeywordに"o"が入力されたら"dog"と"horse"が取り出されて欲しいのです。

handleSeekDone

onClickで発火する関数で、tasksにcompletedがありfalseのもののみsetTasksで格納するように作っています。挙動としましては、想定通りの動きをしているのですが、handleSeekDoingを実装したときに配列にcompleted=falseのみが残っており全て消えてしまうため再度フェッチするようにしたのですが、発火タイミングで配列から削除されすぐfetchTasksが実行され削除した後に最新データが格納されてしまいます

Answer 1

ぱっと見た感じfilterTask()でのfilter条件を以下

- return task.title == searchKeyword;
+ return task.title.includes(searchKeyword);

のように修正すればよさげですが、どうでしょう？

Comments

[GensIto]

ご回答ありがとうございます！！
今試してみたのですが考えていた挙動になりました！ありがとうございます