Datentypen mit useState()

Der useState()-Hook ist ein zentrales Element in der Zustandsverwaltung von React-Funktionskomponenten. Dabei spielt der richtige Umgang mit verschiedenen Datentypen eine wichtige Rolle. In diesem Artikel wird gezeigt, welche Datentypen mit useState() verwendet werden können, wie React intern damit umgeht und welche Besonderheiten bei Referenztypen wie Objekten oder Arrays beachtet werden sollten.

Inhaltsverzeichnis

Datentypen

Sehr oft handelt es sich bei Zustandswerten um Zeichenketten (String) und Zahlen (Number). Man ist allerdings nicht auf diese Datentypen beschränkt.

Man kann jeden validen JavaScript-Datentyp verwenden.

Das bedeutet, dass man nicht nur Zeichenketten oder Zahlen, sondern auch komplexere Typen wie Arrays oder Objekte verwenden kann. React erlaubt hier die Verwendung auch komplexer Typen als Zustandswerte.

Es ist sogar zur Laufzeit problemlos möglich den Datentyp vollständig von z.B. String nach Number zu wechseln. Ob es eine gute Praxis ist, steht auf einem anderen Blatt geschrieben, technisch ist es in React allerdings möglich.

Beispiele

Zeichenkette (String)

            StateExample.jsx
        
import { useState } from 'react';

const StateExample = () => {
    const [enteredEmail, setEnteredEmail] = useState('');
};

export default StateExample;

Zahlen (Number)

            StateExample.jsx
        
import { useState } from 'react';

const StateExample = () => {
    const [counter, setCounter] = useState(0);
};

export default StateExample;

Boolean

            StateExample.jsx
        
import { useState } from 'react';

const BooleanExample = () => {
    const [isActive, setIsActive] = useState(false);
};

export default BooleanExample;

Listen (Arrays)

            StateExample.jsx
        
import { useState } from 'react';

const ArrayExample = () => {
    const [enteredItems, setEnteredItems] = useState([]);

    const addItemHandler = () => {
        const time = new Date().getTime();
        setEnteredItems(prevItems => [...prevItems, time]);
    };

    return (
        <>
            {enteredItems.length > 0 && (
                <ul>
                    {enteredItems.map((todo, idx) => (
                        <li key={idx}>{todo}</li>
                    ))}
                </ul>
            )}
            <button onClick={addItemHandler}>
                Add item
            </button>
        </>
    );
};

export default ArrayExample;

Objekte (Object)

            StateExample.jsx
        
import { useState } from 'react';

const ObjectExample = () => {
    const initPersonData = {
        name: 'John',
        age: 20,
        job: 'Designer',
        salary: 30000
    };

    const [personData, setPersonData] = useState(initPersonData);

    const updatePersonDataHandler = () => {
        setPersonData(currentPersonData => ({
            ...currentPersonData,
            job: 'Developer',
            salary: 50000
        }));
    };

    return (
        <>
            <div className="person_data">
                <p>Name: {personData.name}</p>
                <p>Age: {personData.age}</p>
                <p>Job: {personData.job}</p>
                <p>Salary: {personData.salary}</p>
            </div>
            <button onClick={updatePersonDataHandler}>
                Update data
            </button>
        </>
    );
};

export default ObjectExample;

navigation Navigation