Числа из полей

Поле для чисел — это input с type="number". Пользователь вводит в него число или нажимает на стрелочки. В React оно управляется, как любое другое поле, а что у него в значении, вы знаете из курса JavaScript: текст. Даже когда поле показывает 3, event.target.value — это "3".

Храните в состоянии текст, как его отдаёт поле, а в число превращайте с помощью Number() там, где считаете:

import { useState } from "react";

export default function App() {
    const [tokens, setTokens] = useState("1");
    const total = Number(tokens) * 3;

    return (
        <main>
            <label htmlFor="tokens">Жетоны на напитки, €3 за штуку</label>
            <input
                id="tokens"
                type="number"
                value={tokens}
                onChange={(event) => setTokens(event.target.value)}
            />
            <p>К оплате: €{total}</p>
        </main>
    );
}

Почему бы не хранить в состоянии число, написав setTokens(Number(event.target.value))? Из-за момента, когда поле пустое, например когда пользователь стирает 1, чтобы ввести 4. Number("") равно 0, поэтому в состоянии оказался бы 0, и поле сразу показало бы 0. Если в состоянии лежит текст, поле показывает именно то, что набрал пользователь, а число видит только вычисление. Там пустое поле считается за 0.

А зачем вообще нужен Number()? * сам превращает текст в число, поэтому "3" * 3 случайно оказывается равным 9. Но + так не делает: "3" + 1 — это "31". С Number() вам не нужно помнить, как работает каждый оператор.