top of page
Logo der Online Agentur mdwp

Map

The `map` term in React JS refers to a method that is used to iterate over an array and create a new array with the results of calling a provided function on each element in the original array. In React, `map` is commonly used for rendering multiple components.

For example, imagine you have an array of objects representing a list of users, and you want to create a User component for each object in the array and display them on the page. You would use the `map` method to iterate over your array, and for each object in the array, return a new User component with that object passed as a prop.

Below is a code snippet to better illustrate this:

```jsx
// An array of users
const users = [
{ id: 1, name: 'John' },
{ id: 2, name: 'Jane' },
{ id: 3, name: 'Doe' },
];

function UsersList() {
return (
<div>
{/* We're calling map on our array and for each user, we're returning a new User component with the user object passed as a prop */}
{users.map(user => <User key={user.id} data={user} />)}
</div>
);
}

function User({ data }) {
return <h2>Hello, {data.name}!</h2>;
}
```

In this example, `map` is used to create an array of `User` components, one for each user in the `users` array. Each `User` component is given a `key` prop with a unique identifier (in this case, `user.id`) and a `data` prop with the user object.

It is important in React to provide a unique `key` prop when creating multiple components with `map`, as it helps React identify which items have changed, are added, or are removed. This can significantly boost performance.

bottom of page