Lucas Hubert
Lucas Hubert

Reputation: 15

map in array object with index of other map parameter

this is my code:

{seasons.map(k => (
    <TabPanel key={k} className="list-episode">
         <Scrollbars style={{ height: this.state.screenSize }}>
             {arrEpisodes[k].map(i => (
                  <div key={i.ID} className="episode">

but, the line {arrEpisodes[k]... not work, why?

Upvotes: 0

Views: 56

Answers (1)

Hemadri Dasari
Hemadri Dasari

Reputation: 33994

Change

    {seasons.map(k => (
<TabPanel key={k} className="list-episode">
     <Scrollbars style={{ height: this.state.screenSize }}>
         {arrEpisodes[k].map(i => (
              <div key={i.ID} className="episode">

To

  {seasons.map((k, index)=> (
<TabPanel key={k.ID} className="list-episode">
     <Scrollbars style={{ height: this.state.screenSize }}>
         {arrEpisodes[index].map(i => (
              <div key={i.ID} className="episode">

The issue here is you are using data as index position to arrEpisodes array instead of index and that’s why it fails. You need to pass index of seasons array to arrEpisodes array. Also set id as key to TabPanel instead of Object I.e., k in your code

Upvotes: 3

Related Questions