• PE-BANKと契約して26歳で年収800万になった大阪のフリーランスですが全てを語ります




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

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


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

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

完成イメージ

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

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

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



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

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

完成したコード

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



さいごに

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


それでは!また!!

最後まで読んで頂きありがとうございます!
これ以外にも興味ある記事がきっとあると思うので厳選記事をご査収あれ('◇')ゞ
厳選!目的別にオススメ記事を紹介-あなたの欲しい情報がここに-


新着記事の投稿通知を受け取りたい方は↓からお願いします。
今後メルマガ登録者に様々な情報共有をしていくことも考えています^^