━目次━
Reactでstateに設定しているJavaScriptオブジェクトを全てrenderし、
ボタンでオブジェクトの追加と削除を行うサンプルコードです。
配列のループはよく見ますが、オブジェクトのループはちょっと見つかりづらかったので残しておきます。
Reactをやりだして最初に覚える実装の１つだと思います。
完成イメージ
今回作成するのは以下のように「チワワひょっこりはん」ボタンを押すと画面上のチワワが出たり消えたりするものです。
オブジェクトのループ処理
Reactでは以下のようにオブジェクト内のプロパティを表示するのが一般的です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// オブジェクトの定義 const dogs = { 1: "柴犬", 2: "ポメラニアン", } // Object.keys(オブジェクト名).mapでループ return ( <div> <ul> {Object.keys(dogs).map(key => ( <li key={key}> {dogs[key]} </li> ))} </ul> </div> ); |
これで全オブジェクトのリスト表示ができるので、あとはボタン押下時にstateを更新していけばOKです。
尚、オブジェクトのキーを変数で指定して追加・削除する方法の解説は以下の記事にあります。
【JavaScript】オブジェクトのキーを変数で指定して追加・削除する方法
完成したコード
デモとコードは以下で確認できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
import React, { Component } from "react"; import ReactDOM from "react-dom"; class ObjectLoop extends Component { constructor(props) { super(props); this.state = { dogs: { 1: "柴犬", 2: "ポメラニアン" } }; } // ボタン押下時処理 // チワワのキー(3)が存在しなければ追加、存在すれば削除 handleClick(e, key) { let new_dogs = this.state.dogs; if (new_dogs.hasOwnProperty(key)) { delete new_dogs[key]; } else { new_dogs[key] = "チワワ"; } this.setState({ dogs: new_dogs }); } render() { const { dogs } = this.state; return ( <div> <ul> {Object.keys(dogs).map(key => ( <li key={key}>{dogs[key]}</li> ))} </ul> <button onClick={e => this.handleClick(e, 3)}> チワワひょっこりはん！ </button> </div> ); } } const rootElement = document.getElementById("root"); ReactDOM.render(<ObjectLoop />, rootElement); |
さいごに
最近はReact楽しいので今後色々載せていけたらと思います。
それでは！また！！
最後まで読んで頂きありがとうございます！
人気の記事だけ集めたので是非覗いていってください＾＾
厳選！目的別にオススメ記事を紹介-あなたの欲しい情報がここに-
人気の記事だけ集めたので是非覗いていってください＾＾
厳選！目的別にオススメ記事を紹介-あなたの欲しい情報がここに-
