Wat zijn Lists?

In React werk je vaak met lijstjes (arrays) van data. Om deze lijst op je scherm te tonen, gebruik je de .map() methode.

.map() = loop door array

De .map() functie loopt door elk item in je array en maakt voor elk item een stukje HTML.

Basis: Simpele Array

const FruitList = () => {
  const fruits = ["Appel", "Banaan", "Sinaasappel"];

  return (
    <div>
      <h2>Fruit lijst:</h2>
      {fruits.map(fruit => (
        <p key={fruit}>{fruit}</p>
      ))}
    </div>
  );
};

export default FruitList;

Wat gebeurt er? Voor elk fruit in de array maken we een <p> tag. Als er 3 fruits zijn, krijgen we 3 paragrafen.

Klik "Run map()" en zie het gebeuren:

De Code
fruits.map(fruit => <p key={fruit}>{fruit}</p>)

De Data

Array van strings

Het Resultaat

Paragrafen op het scherm
Klik op "Run map()" om de transformatie te starten
0
Strings in array
0
Paragrafen gerenderd

Dezelfde regel: 3 strings → 3 paragrafen. Het maakt niet uit of je array strings, getallen of objecten bevat — voor elk item komt er één stukje UI uit .map().

Waarom Keys?

React heeft een key nodig om elk item uniek te kunnen identificeren. Dit helpt React om te weten welk item is veranderd, toegevoegd of verwijderd.

Console warning zonder key:

"Warning: Each child in a list should have a unique "key" prop."

Waarom is dit belangrijk?

  • Zonder keys moet React alle items opnieuw renderen (langzaam)
  • Met keys kan React alleen de gewijzigde items updaten (snel)
  • Keys helpen React om de juiste items te verwijderen of toe te voegen

Array met Objecten (beste manier)

In de praktijk werk je meestal met arrays van objecten die een id hebben. Gebruik altijd het id als key!

import { useState } from "react";

const StudentList = () => {
  const [students, setStudents] = useState([
    { id: 1, name: "Anna", role: "Frontend" },
    { id: 2, name: "Bram", role: "Backend" },
    { id: 3, name: "Chloé", role: "Design" }
  ]);

  return (
    <div>
      <h2>Studenten:</h2>
      {students.map(student => (
        <div key={student.id}>
          <p>{student.name} - {student.role}</p>
        </div>
      ))}
    </div>
  );
};

export default StudentList;

Best Practice: Gebruik altijd het id als key wanneer je objecten hebt met een uniek id!

Dé React-manier: een eigen Component per item

Dit is waar het in React om draait: voor elk herhalend item maak je een eigen component. Niet omdat het kan — omdat het zo hoort. Componenten zijn herbruikbaar, makkelijk te onderhouden, en je kunt elk item apart stijlen of uitbreiden zonder dat je lijst-code een puinhoop wordt.

Vuistregel: Zodra je in je .map() meer dan 1-2 regels JSX hebt → trek het uit naar een eigen component. Je StudentList blijft zo overzichtelijk, en je StudentCard kun je hergebruiken in andere lijsten of pagina's.

// src/components/StudentCard.jsx
const StudentCard = ({ student }) => {
  return (
    <div className="student-card">
      <h3>{student.name}</h3>
      <p>{student.role}</p>
    </div>
  );
};

export default StudentCard;
// src/components/StudentList.jsx
import { useState } from "react";
import StudentCard from "./StudentCard";

const StudentList = () => {
  const [students, setStudents] = useState([
    { id: 1, name: "Anna", role: "Frontend" },
    { id: 2, name: "Bram", role: "Backend" },
    { id: 3, name: "Chloé", role: "Design" }
  ]);

  return (
    <div>
      <h2>Studenten:</h2>
      {students.map(student => (
        <StudentCard
          key={student.id}
          student={student}
        />
      ))}
    </div>
  );
};

export default StudentList;

Let op: De key zet je op het component zelf, niet binnen het component!

Zie het in actie

Je hebt nu de code gezien — een array van objecten die via .map() in components verandert. Hieronder zie je exact dat proces visueel. Klik "Run map()":

De Code
students.map(student => <StudentCard student={student} />)

De Data

Array van objecten

Het Resultaat

Components op het scherm
Klik op "Run map()" om de transformatie te starten
0
Objecten in array
0
Components gerenderd

Het grote inzicht: Het aantal objecten = het aantal components. Heb je 3 studenten in je array? Dan krijg je precies 3 StudentCard components op je scherm. Voeg er één toe, en er verschijnt automatisch een vierde.

Key Regels

  • Keys moeten uniek zijn binnen de lijst
  • Gebruik het ID als je dat hebt (beste optie)
  • Index alleen als laatste optie - kan problemen geven bij wijzigingen
  • Keys moeten stabiel zijn - gebruik geen random numbers!
  • Keys zijn alleen voor React - ze verschijnen niet in je HTML

Veelgemaakte Fouten

Fout - geen key:

{users.map(user => (
  <div>{user.name}</div>  // Console warning!
))}

Goed - wel key:

{users.map(user => (
  <div key={user.id}>{user.name}</div>
))}

Fout - index bij veranderlijke lijst:

{users.map((user, index) => (
  <div key={index}>{user.name}</div>
  // Problemen bij toevoegen/verwijderen!
))}

Goed - unieke ID:

{users.map(user => (
  <div key={user.id}>{user.name}</div>
  // Stabiel en uniek!
))}

Fout - random key:

{users.map(user => (
  <div key={Math.random()}>
    {user.name}
  </div>
  // Elke render nieuwe key!
))}

Goed - stabiele key:

{users.map(user => (
  <div key={user.id}>
    {user.name}
  </div>
  // Key blijft hetzelfde
))}