React Basics~map function/ a list of data~

#webdev #javascript #react #frontend

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.