function App() {
    const [users, setUsers] = useState([]);

    const deleteUser = (id) => {
        setUsers(users.filter(u => u.id !== id));
    };

    return <UserList users={users} onDelete={deleteUser} />;
}

function UserList({ users, onDelete }) {
    return (
        <ul>
            {users.map(user => (
                <UserCard
                    key={user.id}
                    user={user}
                    onDelete={onDelete}
                />
            ))}
        </ul>
    );
}

function UserCard({ user, onDelete }) {
    return (
        <div>
            {user.name}
            <button onClick={() => onDelete(user.id)}>Supprimer</button>
        </div>
    );
}