• 目的別厳選記事




Reactでstateに設定しているJavaScriptオブジェクトを全てrenderし、

ボタンでオブジェクトの追加と削除を行うサンプルコードです。


配列のループはよく見ますが、オブジェクトのループはちょっと見つかりづらかったので残しておきます。

Reactをやりだして最初に覚える実装の1つだと思います。

完成イメージ

今回作成するのは以下のように「チワワひょっこりはん」ボタンを押すと画面上のチワワが出たり消えたりするものです。

オブジェクトのループ処理

Reactでは以下のようにオブジェクト内のプロパティを表示するのが一般的です。



これで全オブジェクトのリスト表示ができるので、あとはボタン押下時にstateを更新していけばOKです。

尚、オブジェクトのキーを変数で指定して追加・削除する方法の解説は以下の記事にあります。
 【JavaScript】オブジェクトのキーを変数で指定して追加・削除する方法

完成したコード

デモとコードは以下で確認できます。




さいごに

最近はReact楽しいので今後色々載せていけたらと思います。


それでは!また!!

最後まで読んで頂きありがとうございます!
人気の記事だけ集めたので是非覗いていってください^^
 厳選!目的別にオススメ記事を紹介-あなたの欲しい情報がここに-