Formulier toevoegen (POST)

Het patroon

Een formulier in React werkt anders dan in vanilla HTML. Je laat React de inputwaarden bijhouden in useState (dat heet een controlled input) en stuurt bij submit een POST-request naar je backend.

Controlled inputs

De waarde van een input komt uit state, niet uit het DOM-element. Daarom controlled: React heeft de controle.

const [title, setTitle] = useState('');

<input
  type="text"
  value={title}
  onChange={(e) => setTitle(e.target.value)}
/>

AddWorkoutForm component

Maak een nieuw bestand frontend/src/components/AddWorkoutForm.jsx:

// frontend/src/components/AddWorkoutForm.jsx

import { useState } from 'react';

function AddWorkoutForm({ onWorkoutAdded }) {
  const [title, setTitle] = useState('');
  const [reps, setReps] = useState('');
  const [load, setLoad] = useState('');
  const [error, setError] = useState(null);

  const handleSubmit = async (e) => {
    e.preventDefault();

    const newWorkout = {
      title,
      reps: Number(reps),
      load: Number(load)
    };

    const response = await fetch('http://localhost:4000/api/workouts', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(newWorkout)
    });

    const data = await response.json();

    if (!response.ok) {
      setError(data.error);
      return;
    }

    // Reset form
    setTitle('');
    setReps('');
    setLoad('');
    setError(null);

    // Vertel parent dat er een nieuwe workout is
    onWorkoutAdded(data);
  };

  return (
    <form className="add-form" onSubmit={handleSubmit}>
      <h3>Nieuwe workout</h3>

      <label>Titel:</label>
      <input
        type="text"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
      />

      <label>Reps:</label>
      <input
        type="number"
        value={reps}
        onChange={(e) => setReps(e.target.value)}
      />

      <label>Load (kg):</label>
      <input
        type="number"
        value={load}
        onChange={(e) => setLoad(e.target.value)}
      />

      <button type="submit">Toevoegen</button>

      {error && <p className="error">{error}</p>}
    </form>
  );
}

export default AddWorkoutForm;

Lijst vernieuwen na POST

De backend krijgt nu nieuwe workouts binnen — top. Maar in je WorkoutList verschijnt nog niets, want die heeft maar één keer gefetcht (bij mounten). Twee oplossingen:

Optie A: callback prop

De parent (App.jsx of WorkoutList) geeft een functie mee aan de form. De form roept die aan zodra er een nieuwe workout is.

// frontend/src/App.jsx

import { useState } from 'react';
import WorkoutList from './components/WorkoutList';
import AddWorkoutForm from './components/AddWorkoutForm';

function App() {
  // Truc: een teller die we ophogen om WorkoutList te laten herfetchen
  const [refreshKey, setRefreshKey] = useState(0);

  const handleWorkoutAdded = () => {
    setRefreshKey(prev => prev + 1);
  };

  return (
    <div className="App">
      <h1>Workouts</h1>
      <AddWorkoutForm onWorkoutAdded={handleWorkoutAdded} />
      <WorkoutList key={refreshKey} />
    </div>
  );
}

export default App;

Optie B: state omhoog tillen

Schoner als je de lijst op meerdere plekken wil aanpassen (bijv. ook bij delete en edit). Je verplaatst workouts uit WorkoutList naar App.jsx en geeft hem als prop door.

// frontend/src/App.jsx

import { useEffect, useState } from 'react';
import WorkoutList from './components/WorkoutList';
import AddWorkoutForm from './components/AddWorkoutForm';

function App() {
  const [workouts, setWorkouts] = useState([]);

  useEffect(() => {
    fetch('http://localhost:4000/api/workouts')
      .then(res => res.json())
      .then(data => setWorkouts(data));
  }, []);

  const addWorkout = (newWorkout) => {
    setWorkouts([newWorkout, ...workouts]);
  };

  return (
    <div className="App">
      <h1>Workouts</h1>
      <AddWorkoutForm onWorkoutAdded={addWorkout} />
      <WorkoutList workouts={workouts} />
    </div>
  );
}

WorkoutList hoeft dan zelf niet meer te fetchen — hij krijgt de array gewoon binnen:

function WorkoutList({ workouts }) {
  return (
    <div className="workout-list">
      {workouts.map(workout => (
        <Workout key={workout._id} workout={workout} />
      ))}
    </div>
  );
}

Veelgemaakte fouten

Volgende Stap

Toevoegen werkt. Nu de andere kant: data weer weghalen en filteren.

Verwijderen & Filteren →

DELETE-knop per item en een filter op een enum-veld