öffentliche Büro Dateien
IT-Beratung & Service S.G.

// Updating Arrays
 
 const [mood, setMood] = useState(['happy', 'cheerful']);
 
    console.log(mood);
 
    const handleCLick = () => {
        // Neues Array item hinzufügen
        mood.push('sad'); // Tu das nicht! Es verändert das original Array
 
        setMood([...mood, 'sad']);
 
        // Item aus Array entfernen
        setMood([...mood].filter((mood) => mood !== 'happy'));
 
        // Update Item in Array
        setMood(mood.map((mood) => (mood === 'sad' ? 'blub' : mood)));
    };
 
 
// Updating Objects
 
 const [cocktail, setCocktail] = useState({
        title: 'Old Fashioned',
        price: 7,
    });
 
    console.log(cocktail);
 
    const handleClick = () => {
        cocktail.price = 8; // nicht tun!
        setCocktail(cocktail); // funktioniert nicht
 
        const newPrice = {
            title: cocktail.title, // spread cocktail object
            price: 9,
        };
 
        setCocktail(newPrice);
        // oder
        setCocktail({ ...cocktail, price: 9 });
    };
 
 
 
// Updating nested Objects
 
const [user, setUser] = useState({
        name: 'John',
        lastName: 'Doe',
        address: {
            city: 'San Francisco',
            zipCode: 94111,
        },
    });
 
    console.log(user);
 
    const handleCLick = () => {
        setUser({ ...user, address: { ...user.address, zipCode: 94112 } });
    };
 
 
 
// Updating Object Arrays
 
const [bugs, setBugs] = useState([
        { id: 1, title: 'Bug 1', fixed: false },
        { id: 2, title: 'Bug 2', fixed: false },
    ]);
 
    console.log(bugs);
 
    const handleCLick = () => {
        // Update Props in Array
        setBugs(bugs.map((bug) => (bug.id === 2 ? { ...bug, fixed: true } : bug)));
    };