zrozumiecReact.pl

import { useState } from "react";
import { useQuery } from "@tanstack/react-query";

export default function App() {
    const [username, setUsername] = useState("");
    
    const { data: users } = useQuery({
      queryKey: ["users"],
      queryFn: () => fetch("https://jsonplaceholder.typicode.com/users")
      .then(res => res.json())
    });

    function handleSubmit(e) {
        e.preventDefault();
        fetch('https://jsonplaceholder.typicode.com/users', {
            method: 'POST',
            body: JSON.stringify({
                username
            }),
            headers: {
                'Content-type': 'application/json; charset=UTF-8',
            },
        })
        .then((res) => res.json())
        .then((user) => {
            setUsername("");
            // Zapis nowego użytkownika
        });
    }

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