React Basics~map function/ a list of data~

When we want to display a list of data, how do we do?

・src/Example.js

const animals = ["Dog", "Cat", "Rat"];  const Example = () => {   return (     <>       <ul>         {/* Not using the map function. */}         <li>{animals[0]}</li>         <li>{animals[1]}</li>         <li>{animals[2]}</li>       </ul>     </>   ); };  export default Example;

This code displays a list of data correctly.

・src/Example.js

const animals = ["Dog", "Cat", "Rat"];  const Example = () => {   return (     <>       <ul>         {/* Using the map function. */}         {animals.map((animal) => (           <li> {animal}</li>         ))}       </ul>     </>   ); };  export default Example;

When we want to display a list of data, the Map function is often used to display an array of data like <li></li> element.
Please don't forget to put the key attribute on the<li></li> element.
This code is cleaner than the previous one.

・This is the console's warning, in case we don't put the key attribute on the <li></li> element.