This content originally appeared on DEV Community and was authored by Ogasawara Kakeru
- 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.
This content originally appeared on DEV Community and was authored by Ogasawara Kakeru
Ogasawara Kakeru | Sciencx (2024-10-07T08:46:23+00:00) React Basics~map function/ a list of data~. Retrieved from https://www.scien.cx/2024/10/07/react-basicsmap-function-a-list-of-data/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.