State: eine App, die sich merkt

Warum eine normale Variable nicht reicht

In Level 2 hast du einen Zähler gebaut, indem du nach jedem Klick den Button-Text selbst umgeschrieben hast. React macht es anders: Du änderst die Daten, und React zeichnet den Bildschirm neu. Aber du musst die Daten in eine spezielle Box legen – State – sonst merkt React die Änderung nicht.

Zeig mir das: ein Zähler in React

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked: {count}×
    </button>
  );
}

export default Counter;

Die wichtigste Zeile im Detail – const [count, setCount] = useState(0);:

• useState(0) – „React, richte mir eine Box mit Startwert 0 ein.”
• count – der aktuelle Wert in der Box (nur lesen).
• setCount – der einzig richtige Weg, den Wert zu ändern. Wenn du setCount(5) aufrufst, speichert React den neuen Wert und zeichnet überall neu, wo count vorkommt – von selbst.

Und onClick={...} ist die React-Version von addEventListener("click", ...) – direkt im JSX.

Achte darauf, was nicht im Code steht: kein getElementById, kein textContent. Du sagst nicht wie der Bildschirm geändert werden soll – du sagst, was jetzt wahr ist (count ist jetzt 5), und der Bildschirm richtet sich von selbst.

Zeig mir das: State steuert, was sichtbar ist

State muss keine Zahl sein. Ein aufklappbarer Bereich, die React-Art:

import { useState } from 'react';

function Menu() {
  const [open, setOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setOpen(!open)}>
        {open ? "Hide the menu ▲" : "Show the menu ▼"}
      </button>

      {open && (
        <ul>
          <li>Monday: tomato soup with pasta</li>
          <li>Tuesday: chicken with rice</li>
          <li>Wednesday: pancakes with jam</li>
        </ul>
      )}
    </div>
  );
}

Zwei neue JSX-Tricks:

• condition ? A : B – Kurzform für if/else direkt im HTML: „wenn offen, zeige das, sonst das.”
• condition && (...) – „rendere das nur, wenn die Bedingung wahr ist.” Wenn open false ist, existiert die Liste einfach nicht.

Und !open heißt „das Gegenteil” – macht aus true false und umgekehrt. Eine Zeile = ein Schalter.

Jetzt du 💪

Füge deiner App zwei Dinge mit State hinzu:

1. Ein aufklappbarer Bereich (State true/false) passend zu deinem Projekt: 🏫 aufklappbares Mittagsmenü · 🙋 „zeig/versteck meine Top-Spiele” · 🌍 aufklappbare Länderliste · ⚽ aufklappbarer Kader.
2. Ein Zähler oder eine Abstimmung (numerischer State): 🏫 Abstimmung für den Klassenausflug · 🙋 „wie viele haben mich heute begrüßt” · 🌍 Zähler besuchter Länder · ⚽ Anzeigetafel mit +1 home / +1 away Buttons (zwei States!).

import { useState } from 'react';

function Score() {
  const [home, setHome] = useState(0);
  const [away, setAway] = useState(0);

  return (
    <div className="card">
      <h3>Riverside {home} : {away} Lakeside</h3>
      <button onClick={() => setHome(home + 1)}>Home goal ⚽</button>
      <button onClick={() => setAway(away + 1)}>Away goal 😤</button>
      <button onClick={() => { setHome(0); setAway(0); }}>New match</button>
    </div>
  );
}

export default Score;

Das nimmst du aus dieser Lektion mit

• const [value, setValue] = useState(start) – das Gedächtnis einer Komponente.
• Ändere nur über setValue(...) – React zeichnet dann von selbst neu.
• In JSX: onClick={...}, Bedingungen ? : und && steuern, was sichtbar ist.

© 2026 Ing. Martin Polak / AlgoRhino · Nutzungsbedingungen für Inhalte