【react】stateからjsonを取り出してmapで配列を作る方法

今回は、シンプルにstateからjsonを取り出す一例

state配列の中にjsonを含み、それをmapを使って順番にrenderに表示する方法です。

mapではキー・indexを配列における番号とし、順番に格納された各プロパティを順に

map関数で新しく配列を再編することでrenderに流し込むことができます。

ここら辺はreactを使う際の常套手段なので覚えておくと楽になります。

サンプルとしてleafletと組み合わせてmarkerを順次表示しています。

[json]

[/json]

constructor(props) {
    super(props);
    this.state = {
      json_Data: []
    }
    this.getItems = this.getItems.bind(this);
  }

componentDidMount() {
//この関数でjsonを取得。詳細は省略。
    this.getItems();
};

render() {
    let markers = [];
    {this.state.json.map(function(index) {
      markers.push(<Marker position={[index.lat, index.lng]} icon={marker}><Popup>hello!!!</Popup></Marker>);
    })}
    return (
      <Page>
        <div id="block">
          <Map center={this.state.position} zoom={15} id='map'>
            <TileLayer
              url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
              attribution="© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors" />
            <Marker position={this.state.position} icon={pointer} zIndexOffset={-100} />
            {markers}
          </Map>
        </div>
      </Page>
    );
  }

以上でございます。他にもオブジェクトを加工して配列に再編成したりする方法も

随時載せていきます。