Lists & Keys

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.

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.

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.

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 PeopleList = () => {
  const [people, setPeople] = useState([
    { id: 1, name: "Jan", age: 25 },
    { id: 2, name: "Lisa", age: 30 },
    { id: 3, name: "Tom", age: 22 }
  ]);

  return (
    <div>
      <h2>Mensen:</h2>
      {people.map(person => (
        <div key={person.id}>
          <p>{person.name} - {person.age} jaar</p>
        </div>
      ))}
    </div>
  );
};

export default PeopleList;

Praktisch Voorbeeld: Todo List

const TodoList = () => {
  const [todos, setTodos] = useState([
    { id: 1, text: "Boodschappen doen", done: false },
    { id: 2, text: "Code schrijven", done: true },
    { id: 3, text: "Sport", done: false }
  ]);

  return (
    <div>
      <h2>Todo's:</h2>
      {todos.map(todo => (
        <div key={todo.id}>
          <input 
            type="checkbox" 
            checked={todo.done}
          />
          <span>{todo.text}</span>
        </div>
      ))}
    </div>
  );
};

Met een Component

Je kunt ook een apart component maken voor elk item:

// src/components/Person.jsx
const Person = ({ name, age }) => {
  return (
    <div className="person-card">
      <h3>{name}</h3>
      <p>{age} jaar oud</p>
    </div>
  );
};

export default Person;

// src/components/PeopleList.jsx
import { useState } from "react";
import Person from "./Person";

const PeopleList = () => {
  const [people, setPeople] = useState([
    { id: 1, name: "Jan", age: 25 },
    { id: 2, name: "Lisa", age: 30 },
    { id: 3, name: "Tom", age: 22 }
  ]);

  return (
    <div>
      <h2>Mensen:</h2>
      {people.map(person => (
        <Person 
          key={person.id}
          name={person.name}
          age={person.age}
        />
      ))}
    </div>
  );
};

export default PeopleList;

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

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

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

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

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

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

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