Zrozumieć React

Praca z APIPOST request
Powrót do lekcji

Żeby przećwiczyć zapisywanie danych, ponownie skorzystamy z jsonplaceholder. Pozwala on na wykonanie POST requestu. Co prawda nie zapisuje danych na BE, ale zwróci odpowiedziedź z "zapisanym" obiektem, co pozwoli nam poćwiczyć pracę z API.
Żeby dodać nowego użytkownika należy wykonać taki request:

fetch('https://jsonplaceholder.typicode.com/users', { method: 'POST', body: JSON.stringify({ username: TUTAJ_NAZWA_UŻYTKOWNIKA }), headers: { 'Content-type': 'application/json; charset=UTF-8', }, })

Przesłany model powinien być obiektem zawierającym pole username - możesz go sprawdzić na jsonplaceholder w sekcji "Creating a resource"
Po wysłaniu formularza, dodaj odpowiedź do listy wyświetlanych osób.

Twój kod 💻

import { useState, useEffect } from "react";

export default function App() {
    const [users, setUsers] = useState([]);
    useEffect(() => {
        fetch("https://jsonplaceholder.typicode.com/users")
            .then(res => res.json())
            .then(res => setUsers(res));
    }, []);

    return (<>
        <h1>Lista osób</h1>
        <form>
            <input placeholder="Wpisz imię" />
            <button disabled={name.trim().length === 0}>Dodaj</button>
        </form>
        <ul>
            {users.map(user => <li key={user.id}>
                {user.username}    
            </li>)}
        </ul>
    </>);
}

Open Sandbox

Dla własnej wygody skorzystaj z platformy z zadaniamy w trybie desktopowym 🙏
Jeżeli potrzebujesz dostępu do zadań w wersji mobile skontaktuj się z nami na kontakt@jakzaczacprogramowac.pl

Praca z APIPOST requestPowrót do lekcji

Twój kod 💻

Dla własnej wygody skorzystaj z platformy z zadaniamy w trybie desktopowym 🙏Jeżeli potrzebujesz dostępu do zadań w wersji mobile skontaktuj się z nami na kontakt@jakzaczacprogramowac.pl

Praca z APIPOST request
Powrót do lekcji

Dla własnej wygody skorzystaj z platformy z zadaniamy w trybie desktopowym 🙏
Jeżeli potrzebujesz dostępu do zadań w wersji mobile skontaktuj się z nami na kontakt@jakzaczacprogramowac.pl