javascript - React-rails : 複数の小道具をマップする

Question

私はreact-rails gemから始めたばかりで、助けが必要な以下のコードがあります。私の_mounts.js.jsx、

var Mounts = React.createClass({

render () {
    var showMounts = (mount, details) => <Mount name={mount.name} path={mount.mount_point} det={details} />;

    return (
        <div className="card">
                <div className="card-main">
                    <div className="card-inner margin-bottom-no">
                        <p className="card-heading">Mount Points</p>
                            <div className="card-table">
                                <div className="table-responsive">
                                    <table className="table table-hover table-stripe"  >
                                        <thead>
                                            <tr>
                                                <th>Mounted as</th>
                                                <th>Path</th>
                                                <th>Size</th>
                                                <th>Mount/Unmount</th>

                                            </tr>
                                        </thead>
                                        <tbody>
                                            {this.props.mounts.map(showMounts}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                    </div>
                </div>
            </div>                          
    )
}

});

私のreact_componentで2つの小道具を渡しています。

<%= react_component "Mounts", { mounts: @mounts, mount_details: b} %>

@mounts はファイルシステム オブジェクトで、b は配列です。

私の _mount.js.jsx ファイル

var Mount = React.createClass({
render () {
    var showMount = (mount) => <Mount name={mount} />;
    if(this.props.det == "true"){
        dat = "Unmount"
    }
    else{
        dat =  "Mount"
    }


    return (
        <tr>
            <td> {this.props.name}</td>
            <td> {this.props.path}</td>
            <td> Undefined Size</td>
            <td>
                {this.props.det}
            </td>

        </tr>                               
    )
}

});

私の {this.props.det} は、インデックス ie(0,1,2,3) の値ではなく、配列のインデックス値を表示しています。

私はReactの初心者です。どんな助けも大歓迎です。前もって感謝します。