cloud9環境でReactの検証④ -ループ- 

<b>2016/9/17 関連記事情報を追加しました。</b>

本章ではループの方法について説明します。
Reactでのループの取り扱いについては、「foreach」を利用する方法と「map」を利用する方法があるようです。
（ついでにforも使用可能です）

所詮JavaScriptだしこんな感じで動くだろうとたかをくくり、renderを丸ごとfor文で囲ったりしてました。
全然動きませんでした。
なので仕方なくリファレンスやチュートリアルを読みました。。

以下色々なループ実装を載せていますが、いずれも結果は下図となります。

<img src=https://qiita-image-store.s3.amazonaws.com/0/91976/c17aba6d-436e-b911-7b72-f47e91647b42.png width=400px>

1. map
-----
Reactでは```map``` が使用でき、下記のようなコードでループが実現可能です。
ループを使わないで書いたコードは[cloud9環境でReactの検証③ -変数の扱い-](http://qiita.com/tomine3/items/1f6212a3a98f095ebabc)を参照ください。

```javascript:app.js
import React from "react";
import ReactDOM from "react-dom";

var input_data = [
    {no:1, name:"Taro", message:"Hello"},
    {no:2, name:"Jiro", message:"Good Bye"},
    {no:3, name:"Kumi", message:"Thank you"}
];

var UserBox = React.createClass({
    render: function(){
        return(
            <div classNmae="userBox">
                <ul>
                    <li>No: {this.props.no}</li>
                    <li>Name: {this.props.name}</li>
                    <li>Message: {this.props.message}</li>
                    <li>Age: {this.props.age}</li>
                </ul>
            </div>
        );
    }
});

var UserData = React.createClass({
    render: function(){
        var usermap = this.props.user.map(function(user) {
            var age = 25;
            var key = user.no;
            return (
                <UserBox no={user.no} name={user.name} message={user.message} age={age} key={key} />
            );
        });
        return (
            <div className="userData">
                {usermap}
            </div>
        );
    }
});

ReactDOM.render(
    <UserData user={input_data} />,
    document.getElementById('content')
);
```

最初は```key={user.no}``` で受け渡しを行い、```<li>No: {this.props.key}</li>``` で参照しようとしていましたが、どうやらできないみたいなので、一旦```{var key = user.no;}``` で値を保存して、keyとして使用するようにしました。

2. forEach
-----
さて、みんな大好き```foreach```ですが、下記のようなコードで実現可能です。

```javascript:app.js
import React from "react";
import ReactDOM from "react-dom";

var input_data = [
    {no:1, name:"Taro", message:"Hello"},
    {no:2, name:"Jiro", message:"Good Bye"},
    {no:3, name:"Kumi", message:"Thank you"}
];

var UserBox = React.createClass({
    render: function(){
        return(
            <div classNmae="userBox">
                <ul>
                    <li>No: {this.props.no}</li>
                    <li>Name: {this.props.name}</li>
                    <li>Message: {this.props.message}</li>
                    <li>Age: {this.props.age}</li>
                </ul>
            </div>
        );
    }
});

var UserData = React.createClass({
    render: function(){
        var user_data = [];
        var age = 25;
        this.props.user.forEach(function(user) {
            var key = user.no;
            user_data.push(<UserBox no={user.no} name={user.name} message={user.message} age={age} key={key} />);
        });
        return (
            <div className="userData">
                {user_data}
            </div>
        );
    }
});

ReactDOM.render(
    <UserData user={input_data} />,
    document.getElementById('content')
);
```

一旦```{var key = user.no;}``` で値を保存して、keyとして使用する方法はmapのときと同様ですが、forEachではなんとreturnが設定できません。
なので、ここでは```forEach```のループの中で、```<UserBox no={user.no} name={user.name} message={user.message} age={age} key={key} />``` を```push```するようしました。

3. for
-----
最後にfor文の例も載せておきます（あまり使うことがないかもしれないですが）。

```javascript:app.js
import React from "react";
import ReactDOM from "react-dom";

var input_data = [
    {no:1, name:"Taro", message:"Hello"},
    {no:2, name:"Jiro", message:"Good Bye"},
    {no:3, name:"Kumi", message:"Thank you"}
];

var UserBox = React.createClass({
    render: function(){
        return(
            <div classNmae="userBox">
                <ul>
                    <li>No: {this.props.no}</li>
                    <li>Name: {this.props.name}</li>
                    <li>Message: {this.props.message}</li>
                    <li>Age: {this.props.age}</li>
                </ul>
            </div>
        );
    }
});

var UserData = React.createClass({
    render: function(){
        var user_data = [];
        var age = 25;
        for(var i=0; i<this.props.user.length; i++){
            user_data.push(<UserBox no={this.props.user[i]["no"]} name={this.props.user[i]["name"]} message={this.props.user[i]["message"]} age={age} key={this.props.user[i]["no"]} />);
        }
        return (
            <div className="userData">
                {user_data}
            </div>
        );
    }
});

ReactDOM.render(
    <UserData user={input_data} />,
    document.getElementById('content')
);
```
forの時は```key```いらないかなぁと思っていたんですが、やはり要るみたいです。
```key```がないと```Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `UserData`. See https://fb.me/react-warning-keys for more information.```と表示されてしまいます（動きはしますが）。

さて、ループまで解説しましたが、章を重ねるたびにcloud9の影が薄くなってしまっています。
これ以上薄くなる前にcloud9にも活躍してもらいたいと思います。
ということで次回はajaxとAPIとstateについて解説していきます。

4. おまけ
-----
しばらくぶりに触ってみると、app.jsを更新しても全然反映されなかったりしませんか？
cloud9はしばらくほったらかすとworkspaceを切られてしまうのでもう一度```npm run watch```する必要があります。

```run``` するディレクトリは「react-study」配下ですよ、間違えてませんか？
※この記事通りに進めていれば

5. 引用
-----
[React チュートリアル](https://facebook.github.io/react/docs/tutorial-ja-JP.html)
[React Top-Level API](https://facebook.github.io/react/docs/top-level-api.html)
[Reactの考え方 ](http://js.studio-kingdom.com/react/guides/thinking_in_react)

6. 関連記事
-----
[cloud9環境でReactの検証① -導入-](http://qiita.com/tomine3/items/e6390cd6691a95a8ea53)
[cloud9環境でReactの検証② -コンポーネント-](http://qiita.com/tomine3/items/0e5e8965668051157901)
[cloud9環境でReactの検証③ -変数の扱い-](http://qiita.com/tomine3/items/1f6212a3a98f095ebabc)
[cloud9環境でReactの検証⑤ -Ajax、state管理-](http://qiita.com/tomine3/items/f817c62aa88d8a21df7d)