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

Eine ältere Version des Dokuments wurde geladen! Beim Speichern wird eine neue Version des Dokuments mit diesem Inhalt erstellt.

==== neues Thema ====

[[aufgaben]]

==== 13. Februar 2024 Aufgaben ====
-------------------------------------------------------

1) // TO-DO Setze player name to "Bob" //
<code>

const [game, setGame] = useState({
        id: 1,
        player: {
            name: 'John',
        },
    });
</code>
    
-------------------------------------------------------

2) // TO-DO: Neues Topping dem toppings Array hinzufügen //
<code>
 const [pizza, setPizza] = useState({
        name: 'Spicy Pepperoni',
        toppings: ['Mushroom'],
    });
</code>

-------------------------------------------------------

3) // TO-DO: Ändere quantity des Produkts mit id 2 zu 2 //
<code>
 const [cart, setCart] = useState({
        discount: 0.1,
        items: [
            { id: 1, title: 'Product 1', quantity: 1 },
            { id: 2, title: 'Product 2', quantity: 1 },
        ],
    });
</code>    
-------------------------------------------------------

===== Code Notizen ======
<code javascript>
[Gestern 13:51] Dimitrij Bakumenko
const Tooltip = ({ text, children }) => {   return (     <div style={{ position: 'relative', display: 'inline-block' }}>      {children}      <span style={{ visibility: 'hidden', position: 'absolute', bottom: '100%', left: '50%', transform: 'translateX(-50%)', backgroundColor: 'black', color: 'white', padding: '5px', borderRadius: '5px', zIndex: '1' }}>        {text}      </span> </div>  ); }; export default Tooltip;

const [bugs,setBugs] = setState(
  {id:1, titel: 'Bug1', fixed: false}
  {id:2, titel: 'Bug2', fixed: false}
);

setBugs([...bugs].map((bug) => (bug.fixed === false ? {...bug, fixed: true}: bug )));

//setBugs(bugs.map((bug) => (bug.fixed === false ? {...bug, fixed: true}: bug )));

// setBugs(bugs.map(bug) => (bug = (bugs.id === 2 ? {...bug,fixed = true} : bug ) ) )
setBugs(bugs.map(bug) => (bug = {...bug,fixed: true})

setUser({...user,adress: {...user.adress, zipCode: 94112}});

</code>

==== nachschauen.txt ====
<code javascript>
// 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)));
    };
</code>

Zusammenfassung

Hinweis: Durch das Bearbeiten dieser Seite geben Sie Ihr Einverständnis, dass Ihr Inhalt unter der folgenden Lizenz veröffentlicht wird: CC Attribution-Share Alike 4.0 International

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

Benutzer-Werkzeuge

Webseiten-Werkzeuge

Seiten-Werkzeuge

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