ReactJS display two arrays with mapping

Question

I have two arrays. The i'th element from both arrays form one component. I want to render multiple components like this in a list. Here's the code

var ShowData = React.createClass({
        render:function(){
            var itemNames = this.props.names.map(function(item){
                return <div>{item}</div>;
            });
            var itemDesc = this.props.contents.map(function(description){
                return <p>{description}</p>;
            });

            return(
                <div>
                <h3> {itemNames}</h3>
                <div>{itemDesc}</div>
                </div>
                )

        }

    });

Here's my render function

<ShowData names = {this.state.items} contents = {this.state.desc} />

It displays the entire first array and then the entire second array. What gives?

Jonatan Lundqvist Medén · Accepted Answer · 2015-04-10 12:01:19Z

1

If the arrays have the same order can you do it like this(Not tested).

var ShowData = React.createClass({
    render:function(){
        var self = this;
        var items = this.props.names.map(function(item, key){
            return (<div>
                         <h3>{item}</h3> 
                         <div>{self.props.contents[key]}</div>
                    </div>);
        });
        return(
            <div>
                 {items}
            </div>
            )

    }

});

answered Apr 10, 2015 at 12:01

Jonatan Lundqvist Medén

2,8701 gold badge20 silver badges15 bronze badges

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

3 Comments

Mike Driver Over a year ago

Just to add to your answer that passing two pieces of clearly related data like item and description as separate arrays is kind of terrible. They should be passed to the component as an array of {item: x, description: y} elements instead. Two arrays and indexing like this is just asking for trouble if they ever end up not being exactly equal lists with the correct corresponding indexes between the two.

alsotang Over a year ago

@MikeDriver you are right.. and should tell this to the question author

user4773422 Over a year ago

@MikeDriver I realised that after I got my code working thanks to Jonatan. Now changed it to a single JSON object. Thanks guys !

Collectives™ on Stack Overflow

ReactJS display two arrays with mapping

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