In React.js documentation, I wonder how Array.map()
is used in JSX React.
function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) => <li key={number.toString()}> {number} </li> ); return ( <ul>{listItems}</ul> ); }
in <ul>
tag, why we just put the variable listItems
directly?. Because I think it will return a single array instead of <li>
elements like this :
<ul> [ <li></li>, <li></li>, <li></li>, ] </ul>
how does JSX treat an array?
Did I have to loop listItems
manually?
Thank you in advance.
Advertisement
Answer
you might want to take a look here: https://stackabuse.com/how-to-loop-in-react-jsx/ . I hope this is what you are looking for