0
187
ViewsUnable to populate a list in reactjs from an array
I have a list app. I want its item to populate in MenuItem. I tried the following:-
{app.map((item, index)=>{
<MenuItem value={item}>{item}</MenuItem>
})}
but I'm getting this error:-
Expected an assignment or function call and instead saw an expression
console.log(item) shows [ "NE", "NO" ]
console.log(app) shows [ [ "" , "", "" ], [ "NE", "N)" ] ]
2 answers
Answer question0
You need to return something from map, In your case you have to return MenuItem as
Live Demo
Below will implicitely return the MenuItem
{
app.map((item, index) => <MenuItem value={item}>{item}</MenuItem>);
// without { and }
}
or You can explicitly return the MenuItem
{
app.map((item, index) => {
console.log(item);
return <MenuItem value={item}>{item}</MenuItem>;
});
}
EXPLANATION
Since, you are using map here which should be used if we want to map over the array and return something from it and map will return an array of elements and what you want is to map over the app array and return MenuItem elements because whatever you will return from map will eventually become React children.
return (
<div>
{app.map((item, index) => {
(
<MenuItem value={item} key={item}>
{item}
</MenuItem>
);
})}
</div>
);
Above code snippet gets converted to
return /*#__PURE__*/React.createElement("div", null, app.map((item, index) => {
/*#__PURE__*/
React.createElement(MenuItem, { // NOTICE, you are not
value: item, // returning any React
key: item // Elements from here
}, item);
}));
So, you should return from map
0
2 Issue
console.log(item),toconsole.log(item); // comma to semicolon<MenuItem value={item}>{item}</MenuItem >toreturn <MenuItem value={item}>{item}</MenuItem>// need to return