検索フォームにワードを入力するごとに入力ワードと一致するデータを表示させるようにしたいです。
コードは以下の通りです。
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が上書きされてしまっているためだとは思うのですがどのようにすれば入力フォームの値と連動して表示をさせることができるでしょうか?
わかる方いましたら教えていただきたいです。
よろしくお願いいたします。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。