How to create list of JSX elements using .map()
/* If you want to create a list of JSX elements, then .map() is often your best bet. */ const strings = ['Home', 'Shop', 'About Me']; const listItems = strings.map(string => <li>{string}</li>); <ul>{listItems}</ul> /* In the above example, we start out with an array of strings. We call .map() on this array of strings, and the .map() call returns a new array of <li>s. On the last line of the example, note that {listItems} will evaluate to an array, because it’s the returned value of .map()! JSX <li>s don’t have to be in an array like this, but they can be. */ // This is fine in JSX, not in an explicit array: <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> // This is also fine! const liArray = [ <li>item 1</li>, <li>item 2</li>, <li>item 3</li> ]; <ul>{liArray}</ul>