Sun~sun~Flower's

〜ITエンジニアとして日々前向きに生きていくノウハウブログ〜

MENU

スプレッド構文とfilterメソッドを使ったReactJSの配列操作

reactjs-add-delete-method1

僕はreactjsを勉強中です。
reactJSでの、配列から指定した文字列の追加と削除の方法を知りたいです。

こんにちは。

 

今回は、上記の疑問に答える記事です。

 

結論から言いますと、

 

配列の追加方法は、スプレッド構文を使用します。

 

使用例:

const newList = [...todoArr, todo]; // todoArrは配列型、todoは追加する文字列が格納されています

 

削除方法は、filterメソッドを使用します。

 

使用例:

const text = e.currentTarget.getAttribute('data-value'); // ここでは、削除したい文字列を取得しています
odoArr.filter(item => item !== text) // 削除したい文字列を除いた、todoArrという配列を新しく生成

以上です!

 

ありがとうございました。

 

【参考資料】

qiita.com

zenn.dev