I'm getting an array that contains another array inside of it. It is a json. I'm trying to do two loops, but without success.
{this.state.listOfAlarms && this.state.listOfAlarms.map((alarms) =>
{alarms.report && alarms.report.forEach((alarm) =>
<ReportAlarmRow alarm={alarms} alarmType={alarm}/>
)}
)}
I had tried to start with forEach and after do the .maps. Failed again.
For readability, you should do those loops before the return statement.
In addition, you need to add a key property to your <ReportAlarmRow> component.
A "key" is a special string attribute you need to include when creating lists of elements.
Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity.
Lists and Keys - React documentation
I set a key with key={alarm[i].id} but I don't know what attributes are in your alarm object.
Please, use a unique int value !
Keys Must Only Be Unique Among Siblings
Try like this
constructor(props) {
super(props);
// State
this.state = {
listOfAlarms: []
}
}
render() {
const reports = this.state.listOfAlarms.map((alarms) => {
if (alarms.report) {
return alarms.report.map((alarm) =>
<ReportAlarmRow alarm={alarms} alarmType={alarm} key={alarm.id} />
);
}
});
return {
<div>
{ reports.length ? reports : null }
</div>
}
}
Try something like this
var Hello = React.createClass({
render: function() {
const something = [
[
1,
2,
3
],
[
4,
5,
6
]
]
const JSXElem = something.map((elem) => {
elem.map((nestedElem) => {
// <Render Method>
})
})
return <div>{JSXElem}</div>;
}
});
<Render Method> with your own render method. And also I haven't tried running this but should give you the picture. Try adding proper return statements and debug, it should work.You mean something like this
render(){
let a = [ [1,2],[3,5],[7,8]];
return(
<div>
{(()=>{
let items = [];
if(a){
a.forEach((index,value)=>{
value.forEach((i,item)=>{
items.push(<div key={ `${index}_${i}`}>item</div>)
})
})
}
return items;
})()}
</div>
)
}
=>