Joining arrays in react render function

Question

In a json feed (below) I have two arrays, "rent" and "buy" I wish to join and display in an html table but I'm not sure where to do it.

The feed looks like this...

"store": {
                "rent": [
                    { "title": "Lord of the ring masters", "cost": 2.99 }
                ],
                "buy": [
                    { "title": "Fast and Furious 14", "cost": 5.99 },
                    { "title": "Shogun Assassin", "cost": 2.99 }
                ],
                "total": 30.20
            }

And the render function in my view, which will display one of the above correctly looks like this

 render: function(){

    var createRow = function(rowItem, i){
        return (
            <tr key={i}>

                <td>{rowItem.name}</td>
                <td>{rowItem.cost}</td>
            </tr>
        );
    };


    return (
        <div>
            <h1>Package</h1>
            <table className="table">
                <thead>
                <th>Package</th>
                <th>Name</th>
                <th>Cost</th>
                </thead>
                <tbody>
                {this.props.packageList.rent.map(createRow, this)}
                </tbody>
            </table>
            Total: {this.props.packageList.total}
        </div>
    );
}

Could any one tell me how I would alter the above to join the arrays and present the data like this...

**Rent** Lord of the ring masters £2.99
**Buy** Fast and Furious 14 £5.99
**Buy** Shogun Assassin £2.99

Georgemayer · Accepted Answer · 2015-10-06 16:19:23Z

1

Rather than having your map function called within the render, create another method on your object that returns an array of rows. So your new component looks like:

var myClass = React.createClass({    

renderRows: function() {
  var rows = [];
  this.props.packageList.rent.forEach(function(rowItem, i) {
    rows.push(
        <tr key={i}>
            <td>rent</td>
            <td>{rowItem.name}</td>
            <td>{rowItem.cost}</td>
        </tr>
    );
  });

  this.props.packageList.buy.forEach(function(rowItem, i) {
    rows.push(
        <tr key={i}>
            <td>buy</td>
            <td>{rowItem.name}</td>
            <td>{rowItem.cost}</td>
        </tr>
    );
  });
  return rows;
},

render: function(){

return (
    <div>
        <h1>Package</h1>
        <table className="table">
            <thead>
            <th>Package</th>
            <th>Name</th>
            <th>Cost</th>
            </thead>
            <tbody>
            {this.renderRows()}
            </tbody>
        </table>
        Total: {this.props.packageList.total}
    </div>
);
}

})

Alternatively, you could combine the data ahead of time and just do one loop over the entire thing. Finally, you probably don't want to define new function in your render function, rather, as I suggested, create a new method on the component. Also, I haven't tested the above, so be sure to check for errors.

answered Oct 6, 2015 at 16:19

Georgemayer

3255 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jose the hose Over a year ago

Thank you. It worked but I had to remove the key from each row as it wouldnt display all of the rows. Maybe becaus eof duplication?

Jose the hose Over a year ago

From the DOM: Encountered two children with the same key, .$1. Child keys must be unique; when two children share a key, only the first child will be used

Georgemayer Over a year ago

Glad you figured it out. FWIW, you can key it on anything unique. Perhaps in this case it would make sense to key it on "title" if they don't come with unique ids.

Collectives™ on Stack Overflow

Joining arrays in react render function

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related