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

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

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

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

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

1. map

---

Reactではmap が使用でき、下記のようなコードでループが実現可能です。
ループを使わないで書いたコードはcloud9環境でReactの検証③ -変数の扱い-を参照ください。

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として使用するようにしました。

1. forEach

---

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

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するようしました。

1. for

---

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

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について解説していきます。

1. おまけ

---

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

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

1. 引用

---

React チュートリアル
React Top-Level API
Reactの考え方

1. 関連記事

---

cloud9環境でReactの検証① -導入-
cloud9環境でReactの検証② -コンポーネント-
cloud9環境でReactの検証③ -変数の扱い-
cloud9環境でReactの検証⑤ -Ajax、state管理-