React-rails : Map multiple props

Question

I am just starting with the react-rails gem, and here is my below code that i need help. My _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>                          
    )
}

});

I am passing two props in my react_component,

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

@mounts is a Filesystem Object and b is an array.

My _mount.js.jsx file

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>                               
    )
}

});

My {this.props.det} is displaying the array index values and not the values in the Index i.e(0,1,2,3).

I am a noob in React, any help is appreciated. Thanks in Advance.

Answer 1

In fact, this is the expected behavior. For a function passed to Array.prototype.map, the second argument will be the index.

Here's an example:

var myArray = ["A", "B", "C"]
var myMapFn = function(item, index) { 
  console.log(index, " => ", item) 
}
myArray.map(myMapFn)
// 0 => A
// 1 => B
// 2 => C

Notice that the arguments to myMapFn are (item, index).

I think you want an item from the mount_details array instead of that index. Is that correct?

If so, you could fix this in your case by modifying showMounts:

var mountDetails = this.props.mount_details
var showMounts = function(mount, mountIndex) {
   // use the given index to find the matching `details` object:
   var details = mountDetails[mountIndex] 
   // now create the <Mount />
   return (
     <Mount 
       name={mount.name} 
       path={mount.mount_point} 
       det={details} 
     />
  )
}

In that implementation, the function finds the corresponding entry from the mountDetails array using the given index.

Does that do what you want?