How to loop thorough object and create child component in React.js

Question

I am new to React.js and getting stuck loop thorough child component. I have an object and I need to loop through it which should create child component using the values of that object. Thank you in advance

var o = {
    playerA: {
        name: 'a',
    },

    playerB: {
        name: 'b',
    }
};


var Players = React.createClass({
    getPlayers: function(){
        return o;
    },    

    render: function() {
        return (
            <div>
                <div className="row"> Players</div>
                {this.getPlayers()}
                <Player /> 
            </div>
        );
    }
});


var Player = React.createClass({    
    render: function(){
        return (
            <div className="row" > player {this.name} < /div>
        )
    }
});

React.render(<Players />, document.getElementById('container'));

The result should be:

player a

player b

I have fiddle set up at: http://jsfiddle.net/rexonms/7f39Ljbj/

Have a look at facebook.github.io/react/docs/tutorial.html, "Hook up the data model" — Felix Kling
– Felix Kling, Commented Apr 19, 2015 at 0:39

sagat · Accepted Answer · 2021-03-08 02:07:51Z

6

First, you'll iterate over the data with .map so that you can return markup (the child component) for each item. In the child component markup, you pass the data for that item in an attribute.

{Object.keys(yourObject).map(function(key) {
  return (
    // Add a key to the list item, it is mandatory from react
    // What the key consists of if it's the id or not is up to you
    // it needs to be unique though
    <ChildComponent key={key} data={yourObject[key]}/>
  );
})}

The child component's markup can then use that data by binding this.props.data.

<div>Player: {this.props.data.name}</div>

You don't have to use the name "data" for the attribute/property. Something like info={yourObject[key]} with this.prop.info is just as valid.

Working JS Fiddle here.

edited Mar 8, 2021 at 2:07

sagat

1,40614 silver badges16 bronze badges

answered Apr 19, 2015 at 0:52

m59

43.9k14 gold badges122 silver badges139 bronze badges

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

Collectives™ on Stack Overflow

How to loop thorough object and create child component in React.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related