CODEWITHSUNDEEP
javascriptreactjs
gpbaculio
gpbaculio

Reputation: 5968

perform map inside a map in javascript?

i have this code: 

_renderChannels() {
     return this.state.channelsData.map(channelData => {
       return this.state.channelsStreamData.map(channelStreamData => {
          return <Channel channelData={channelData} channelStreamData={channelStreamData} />
      })
    });
  }

I want to map props on Channel component but Channel component is being returned 9 times repeatedly when it's supposed to be only 3 times? So I want to map the data of channelData and channelStreamData and return the component Channel. I tried removing the map inside of it but it's not returned when I don't return it. Help?

Upvotes: 1

Views: 71

Answers (1)

user5734311
user5734311

Reputation:

This should do it:

_renderChannels() {
    return this.state.channelsData.map((channelData, i) => <Channel 
        channelData={channelData}
        channelStreamData={this.state.channelStreamData[i]}
    />);
}

I've added i, the index parameter. That way I can grab the same element from the this.state.channelStreamData array.

Upvotes: 1

Related Questions