React - Veränderungen der UI mit State(s)

Standardmäßig wird eine React-Komponente nur einmal ausgeführt. In einer Anwendung, die beispielsweise einen Preis anzeigt und bei Klick auf einen Button den dargestellten Preis ändern soll, benötigen wir einen Mechanismus, um die Komponente zu aktualisieren und den neuen Preis anzuzeigen.

Hier kommt der React-Hook useState() ins Spiel.

Beispiel anhand Änderung eines Preises

//App.jsx
import { useState } from 'react'
import './App.css'

function App() {
  const [price, setprice] = useState('100');
    
    function handleClick(){
        setprice('75');
    }
    return (
        <div>
            <p data-testid="price">{price}$</p>
            <button onClick={() => handleClick()}>Apply Discount</button>
        </div>
    );
}

export default App

Im Aufruf von useState() wird der Anfangswert (100) übergeben. Die Variable price repräsentiert den aktuellen Wert, während setPrice eine Funktion ist, mit der dieser Wert aktualisiert wird.

Wichtige Hinweise

• Der Hook useState() muss direkt innerhalb einer React-Komponente aufgerufen werden – nicht innerhalb von Schleifen oder verschachtelten Funktionen.
• Wird in der Funktion handleClick unmittelbar nach dem Aufruf von setPrice auf den Wert price zugegriffen, zeigt dies noch den alten Wert an, da die Aktualisierung noch nicht erfolgt.