[解決済み] オブジェクトの配列からReactコンポーネントをレンダリングする

質問

オブジェクトを含む配列であるstationsというデータを持っています。

stations : [
  {call:'station one',frequency:'000'},
  {call:'station two',frequency:'001'}
]

配列の位置ごとにuiコンポーネントをレンダリングしたい。今のところ、次のように書くことができます。

 var stationsArr = []
 for (var i = 0; i < this.data.stations.length; i++) {
     stationsArr.push(
         <div className="station">
             {this.data}
         </div>
     )
 }

そして、レンダリング

render(){
 return (
   {stationsArr}
 )
}

問題は、すべてのデータが印刷されてしまうことです。代わりに、次のようなキーだけを表示したいのです。 {this.data.call} のようにキーを表示したいのですが、これでは何も印刷されません。

このデータをループして、配列の各位置に対して新しいUI要素を返すにはどうしたらよいでしょうか。

どのように解決するのですか？

駅のリストをReactElementsにマッピングすればよい。

React >= 16では、余分なhtml要素のラッパーを必要とせず、同じコンポーネントから複数の要素を返すことが可能です。16.2以降では の新しい構文 <> を使用してフラグメントを作成することができます。これが動作しない、あるいは IDE でサポートされていない場合は <React.Fragment> を使うことができます。16.0 と 16.2 の間では、非常にシンプルな ポリフィル を使うことができます。

以下を試してみてください。

// Modern syntax >= React 16.2.0
const Test = ({stations}) => (
  <>
    {stations.map(station => (
      <div key={station.call} className='station'>{station.call}</div>
    ))}
  </>
); 

// Modern syntax < React 16.2.0
// You need to wrap in an extra element like div here

const Test = ({stations}) => (
  <div>
    {stations.map(station => (
      <div className="station" key={station.call}>{station.call}</div>
    ))}
  </div>
); 

// old syntax
var Test = React.createClass({
    render: function() {
        var stationComponents = this.props.stations.map(function(station) {
            return <div className="station" key={station.call}>{station.call}</div>;
        });
        return <div>{stationComponents}</div>;
    }
});
 
var stations = [
  {call:'station one',frequency:'000'},
  {call:'station two',frequency:'001'}
]; 

ReactDOM.render(
  <div>
    <Test stations={stations} />
  </div>,
  document.getElementById('container')
);

を忘れないでください。 key 属性を忘れないでください!

https://jsfiddle.net/69z2wepo/14377/