Javascriptの配列の要素を呼び出す時に発生するエラーを解消したい

Question

###前提・実現したいこと
RailsアプリケーションにReactを導入して開発をしています。
Reactの子コンポーネントにおいて、親から渡ってきた配列オブジェクトの要素を取り出そうとすると
発生するエラーを解消したいと思っています。

Rails 4.2.2
Ruby 2.0.0
React
Ajax
で開発をしています。

###実装がうまくいかない箇所

protocolオブジェクトの中に、配列が入っていて、その要素を取り出したいのですが
下記のコードのthis.props.protocol[0].procedureでエラーが発生しています。

var ProtocolItem = React.createClass ({
  render: function() {
    // デバッグ用に表示
    console.log("protocol array", this.props.protocol);
    console.log("protocol array [0]", this.props.protocol[0]);
      return (
        <div className="protocol">
          <h2 className="protocolUser">{this.props.protocol[0].procedure}</h2>
        </div>
      );
  }
});

choromeのコンソールでは、console.logのそれぞれで次のスクショのように値が表示されています。

最終的には次のようなコードに改修し、protocol配列のprocedureを
リスト形式で表示したいと思っています。

var ProtocolItem = React.createClass ({
  render: function() {
    // デバッグ用に表示
    console.log("protocol array", this.props.protocol);
    console.log("protocol array [0]", this.props.protocol[0]);
    console.log("protocol の要素（procedure）", this.props.protocol[0]);
    // for文の中で、protocolオブジェクトのprocedure要素を順に表示
    for ( i = 0; i < this.props.protocol.length; i++) {
      return (
        <div className="protocol">
          <h2 className="protocolUser">{this.props.protocol[i].procedure}</h2>
        </div>
      );
    }
  }
});

エラーとしては、下記のエラーが発生しています。
console.logでprotocolの中身を確認する限りでは、protocolはprocedureの要素を持っているはずなのに
エラーが発生する理由が理解できずにいます。

Uncaught TypeError: Cannot read property 'procedure' of undefined

###試してみたこと
要素の取り出し方が正しくないのかと思い、
this.props.protocol[0][procedure]
this.props.protocol[0]['procedure']
など試してみたのですが、いずれもエラーは解消されませんでした。

追加で必要な情報などあれば、言っていただけるとありがたいです。

Answer 1

ループ処理はfor文を使うより、mapを使ったほうがいいですよ。
自分だったらこう書きますかね。

これでいけませんか？

for ( i = 0; i < this.props.protocol.length; i++) {
      return (
        <div className="protocol">
          <h2 className="protocolUser">{this.props.protocol[i].procedure}</h2>
        </div>
      );
    }

↓↓↓↓↓↓↓↓

this.props.protocol.map((val) => {
  return(
   <div className="protocol">
     <h2 className="protocolUser">{val.procedure}</h2>
   </div>
  )
});

Comments

[solt0723]

回答ありがとうございます！
遅くなっていしまい申し訳ありません、！

回答いただいたように、mapを使ってデータを取り出すことができました。
ありがとうございます。

```
render: function() {
// protocolsの中身をmapして、リスト形式で表示
var protocolItems = this.state.protocols.map(function(protocol) {
console.log('map protocol', protocol.procedure);
return (
<div className="protocol">
<h2 className="protocolUser">{protocol.procedure}</h2>
</div>
);
});
```

Answer 2

<h2 className="protocolUser">{this.props.protocol[i].procedure}</h2>

Reactはよく分からないのですが、このレンダラの中のthisは想定されているものを返してますか？ レンダラの中ではスコープが違うということはありえませんか？

たとえば、このように書くと解決したりしませんか？

var ProtocolItem = React.createClass ({
  render: function() {
    // ...
  }.bind(this);
});

Comments

[Lhankor_Mhy]

あ、後段のコードでは解決しなさそうな気がしてきました。

[solt0723]

ご回答ありがとうございます！
遅くなり申し訳ありません、、

thisは正常に取れているようで、.bind(this)の方法も試してみましたが、解決はしませんでした。
最終的には、別の方の回答でいただいたようにmapを使うことで解決しました。