【reacy】mapを使って新規に配列を作ってrenderに流し込む

今日は、配列をmap関数で新しい配列に更新してコンポーネントに埋め込む方法について記録します。

selectタグで該当する値をどうやってsetstateしようか試行錯誤しましたが、下記のコードで確認できました。

constructor(prop){
	super(prop);
	this.data = [
       {value:"", label:"▼フルーツ選択"},
  {value:"1", label:"りんご"},
  {value:"2", label:"メロン"},
  {value:"3", label:"マスカット"},
  {value:"4", label:"ココナッツ"},
  {value:"5", label:"ライチ"},
    ];
	this.state = {
		}
}

render() {
const fruit = this.state.fruit;
render(
 フルーツ選択<select onChange={ e => this.setState({fruit: e.target.value}) }  defaultValue="">
        { this.data.map( d => <option  value={d.value}>{d.label}</option>)}
      </select>
);
}

まずpropで渡す初期値に配列dataを定義しておきます。render内ではmap関数を使って配列dataを要素文だけoptionタグに新しい配列として変換しています。

簡単なプルダウンならこれで動かすことができますが、使い方を覚えれば都道府県をプルダウンで選ぶときにその県の市だけ抜き出す方法にも応用できます。

onchangeメソッドが書いてありますが、これはフルーツの番号を他の関数に飛ばして確認しているだけなので動作には関係ないです。

参考にさせていただいた方のリンクを載せておきます。↓

https://qiita.com/Ryosuke-Hujisawa/items/24bd369e0d614c1424a4

https://qiita.com/noobar/items/44046425daae9771cc8d

https://qiita.com/macotok/items/47880edf1e46e131109c

以上です。