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.

・This is the result on the screen.