“Comment créer une liste d'éléments JSX à l'aide de .map ()” Réponses codées

Comment créer une liste d'éléments JSX à l'aide de .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>