.map in JSX

Hi, I’m currently learning React and find the following syntax strange:

const strings = ['Home', 'Shop', 'About Me'];
 
const listItems = strings.map(string => <li>{string}</li>);
 
<ul>{listItems}</ul>

I understand the following will create an array with 3 list items. I don’t understand though why the following line will display the list items as well. Surely the value of listItems is just an array like this:

const listItems = [
  <li>Home</li>,
  <li>Shop</li>,
  <li>About Me</li>
]

Why does the line <ul>{listItems}</ul> automatically take the elements within the array and turn them into elements outside of an array? I hope that makes sense - I’m sturggling to word my question.

Thank you

Hello!

This is internal feature of React.js library, as I know. If you provide array then React.js will iterate against it and render every single element to DOM. See https://reactjs.org/docs/lists-and-keys.html#rendering-multiple-components

1 Like