Reputation: 15
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
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