reactで動的な検索をしたい

Question

検索フォームにワードを入力するごとに入力ワードと一致するデータを表示させるようにしたいです。

コードは以下の通りです。

import React, { useState } from 'react';

const App = () => {
  const [array, setArray] = useState([
    { name: 'aaaaa' },
    { name: 'abbbb' },
    { name: 'ccccc' },
  ]);

  const filterArray = (e: any) => {
    const updatedArray = array.filter((data) => {
      return data.name.includes(e.target.value);
    });
    setArray(updatedArray);
  };
  return (
    <div>
      <input type="text" onChange={filterArray} />
      {array.map((data) => {
        return <p>{data.name}</p>;
      })}
    </div>
  );
};
export default App;

本当は上記画像の検索フォームに"a"入力した場合は、”aaaaa”と”abbbb”が表示→入力フォームを空にすると全てのデータを表示させたいのですが検索フォームにaと入れた後に空にするとcccccが表示されません。
setArray(updatedArray);と書いてしまっているためarrayが上書きされてしまっているためだとは思うのですがどのようにすれば入力フォームの値と連動して表示をさせることができるでしょうか？

わかる方いましたら教えていただきたいです。
よろしくお願いいたします。

Answer 1

こないな感じかのう。

import { useState } from "react";

const RAW_DATA = [{ name: "aaaaa" }, { name: "abbbb" }, { name: "ccccc" }];

const App = () => {
  const [array, setArray] = useState(RAW_DATA);

  const filterArray = ({ target: { value } }) => {
    setArray(
      value
        ? RAW_DATA.filter(({ name }) => name.match(new RegExp(`^${value}`)))
        : RAW_DATA
    );
  };

  return (
    <div>
      <input type="text" onChange={filterArray} />
      {array.map(({ name }) => (
        <p key={name}>{name}</p>
      ))}
    </div>
  );
};

export default App;

➡　サンプル （※以下の追記の件、修正ずみ）

追記

おっと間違うてた。入力された文字列から始まるゆうフィルターやのうて、入力された文字列を含んでいればええのんか。それやったら正規表現のとこ、^は不要やから

- new RegExp(`^${value}`)
+ new RegExp(value)

でええわいね。ちゅうか、質問者さん書いてるように、文字列のincludes使うて、

name.includes(value)

でオッケー牧場やねん。

Answer 2

setArray(updatedArray);と書いてしまっているためarrayが上書きされてしまっているためだとは思うのですが

まずは、復元する元の配列をどこかに確保しておく必要があります。上書きで消してしまったデータは復元できません。

Comments

[alpha95]

やはり上書きされてしまうので別で配列を確保しておく必要があるのですね。
ありがとうございます。

こちらの質問に対して、追加でわからない部分が出てきているため、別で質問をあげました。
https://teratail.com/questions/363669?modal=q-comp

もし、よろしければこちらも見ていただけませんでしょうか？