Recharts: No display when looping twice inside the BarChart - reactjs

Question

I use Recharts to display my charts.
My data looks like that:
const data = [
{name: 'day 1', supermarket1:{strawberry:4090, apple:3740} , supermarket2:{strawberry:6498, apple:1008}, supermarket3:{strawberry:4090, apple:3740}},
{name: 'day 2', supermarket1:{strawberry:200, apple:768} , supermarket2:{strawberry:700, apple:876}, supermarket3:{strawberry:300, apple:932}}
]
I want to loop twice inside the barchart to display my data
I tried with just one loop inside the barchart and it worked perfectly but when I want to loop twice the display doesn't appear I don't know why
My code looks like that:
const SimpleBarChart = React.createClass({
render () {
return (
<BarChart width={600} height={300} data={data}
margin={{top: 5, right: 30, left: 20, bottom: 5}}>
<CartesianGrid strokeDasharray="3 3"/>
<XAxis dataKey="name"/>
<YAxis/>
{["supermarket1", "supermarket2", "supermarket3"].map((elt, index) =>{
["strawberry", "apple"].map((fruit, index2) =>{
console.log(`${elt}.${fruit}`);
return(
<Bar
key={index + index2}
dataKey={`${elt}.${fruit}`}
fill="#1f77b4"
>
</Bar>
)
})
})}
</BarChart>
);
}
})

Answer 1

The solution is to map twice outside the BarChart and organize the data as wished in a third array to use it inside the BarChart.
const SimpleBarChart = React.createClass({
render () {
let keys= [];
{["supermarket1", "supermarket2", "supermarket3"].map((elt, index) =>{
["strawberry", "apple"].map((fruit, index2) =>{
keys.push(`${elt}.${fruit}`)
})
})}
return (
<BarChart width={600} height={300} data={data}
margin={{top: 5, right: 30, left: 20, bottom: 5}}>
<CartesianGrid strokeDasharray="3 3"/>
<XAxis dataKey="name"/>
<YAxis/>
{keys.map((key, index) =>{
return(
<Bar
key={index}
dataKey={`${key}`}
fill="#1f77b4"
></Bar>
)
})}
</BarChart>
);
}
})
demo