DEV Community

Cover image for React Basics~map function/ a list of data~
Ogasawara Kakeru
Ogasawara Kakeru

Posted on

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;
Enter fullscreen mode Exit fullscreen mode
  • 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;
Enter fullscreen mode Exit fullscreen mode
  • 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.

Image description

・This is the result on the screen.

Image description

Top comments (0)