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

element.

• Please don't forget to put the key attribute on the

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

element.

・This is the result on the screen.

The above is the detailed content of React Basics~map function/ a list of data~. For more information, please follow other related articles on the PHP Chinese website!