Zahlen aus Feldern

Ein Feld für Zahlen ist ein input mit type="number". Der Nutzer tippt eine Zahl ein oder klickt auf die kleinen Pfeile. In React wird es wie jedes andere Feld kontrolliert, und aus dem JavaScript-Kurs weißt du, was sein Wert ist: Text. Auch wenn das Feld 3 zeigt, ist event.target.value gleich "3".

Behalte den Text im State, so wie das Feld ihn liefert, und wandle ihn mit Number() dort in eine Zahl um, wo du mit ihm rechnest:

import { useState } from "react";

export default function App() {
    const [marken, setMarken] = useState("1");
    const summe = Number(marken) * 3;

    return (
        <main>
            <label htmlFor="marken">Getränkemarken, je 3 €</label>
            <input
                id="marken"
                type="number"
                value={marken}
                onChange={(event) => setMarken(event.target.value)}
            />
            <p>Zu zahlen: {summe} €</p>
        </main>
    );
}

Warum keine Zahl im State, mit setMarken(Number(event.target.value))? Wegen des Moments, in dem das Feld leer ist, etwa wenn der Nutzer die 1 löscht, um eine 4 zu tippen. Number("") ist 0, also wäre der State 0, und das Feld würde sofort 0 zeigen. Mit Text im State zeigt das Feld genau das, was der Nutzer getippt hat, und nur die Berechnung sieht eine Zahl. Dort zählt ein leeres Feld als 0.

Und wozu überhaupt Number()? * macht aus Text von selbst eine Zahl, also ist "3" * 3 zufällig 9. Aber + tut das nicht: "3" + 1 ist "31". Mit Number() musst du dir nicht merken, was wie funktioniert.