Hoe breng ik een lijst met gegevens in Reactjs in kaart?

Een van de basisaspecten van React is het gebruik van components om je weergavelogica op te delen in bruikbare stukken. Meestal zul je met een array van gegevens werken en die gegevens willen weergeven op de pagina.

Het eerste wat je moet doen, is de component logica maken om een enkel item van de array te renderen. Laten we zeggen dat we een lijst van gebruikers hebben, elk met een naam en een email. We zouden dit kunnen weergeven met een User component als volgt:

```
function User({ user }) { return (

{user.name}

{user.email}

);
}
```
Je kunt de array vervolgens in kaart brengen door de `.map()` functie te gebruiken, die beschikbaar is op elke JavaScript array.

```
function UserList({ users }) { return (

{users.map(user => ( ))}

);
}
```
In het bovenstaande voorbeeld nemen we de array van users en voor elke user in de array renderen we een `` component, en geven we de user als een prop door.

Waarom gebruiken we `key={user.id}`? In React helpt het gebruik van keys je app efficiënter te zijn bij het opnieuw renderen van onderdelen van je applicatie. Ze zijn nodig wanneer je met array’s werkt, zodat React de items in de array kan bijhouden.

En dat is het! Je hebt nu een lijst met gegevens in kaart gebracht in je React applicatie.