Zustandsbehaftete Komponenten

Funktionale Komponenten

Funktionale Komponenten verwenden den useState-Hook, um den Zustand innerhalb einer Komponente festzuhalten.

useState gibt eine Variable mit dem aktuellen Zustandswert und eine Funktion zum Ändern dieses Wertes zurück. Der Zustand kann nicht durch direktes Zuweisen eines neuen Wertes verändert werden.

In der Funktion kann entweder der neue Wert direkt übergeben werden, oder alternativ eine Callbackfunktion, die den vorherigen Zustand als Wert übergibt.

function Counter() {
  const [value, setValue] = useState(1);
  
  const handleClick = () => {
    setValue(value => value + 1);
  };

  return (
    <div>
      <p>
        Counter Value: {value}
      </p>
      <button onClick={handleClick}> Increase counter </button>
    </div>
  );
}

Beispiel auf Codepen