Problem - Trying to add user in user list

React
1

Hello people, I need some help with a mini project from the React 18 course.
I am trying to mix stuff a little bit, I am re-doing the user list app from the [Connecting to the Backend] section in the React with TypeScript course.

I am showing the users in a table (instead of a list) and I also include phone and email properties.
Instead of a button to add a hardcoded user, I 've made a Form so users can be added manually.

The problem is that I can’t make the button work properly. I am missing something and I don’t really know what! I’ve spent like 5 hours on this…

Here are my app and form components:
App.tsx here
UserForm.tsx here

Below I pasted my code from the app and form components!

2 
import { z } from 'zod'
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';



const schema = z.object({
    id: z.number(),
    name: z.string().min(2, {message: 'Name should be at least 2 characters long'}),
    email: z.string().email(),
    phone: z.string().min(1, {message: 'Mobile Phone is required'})
})

type UserData = z.infer <typeof schema>

interface Props {
    onSubmit: (data:UserData) => void;
}

const UserForm = ( {onSubmit}:Props ) => {
    const { register, handleSubmit, reset, formState: {errors} } = useForm <UserData> ( {resolver: zodResolver(schema)} );
    
  return (<>
  <h1 className="display-6">Add a new contact.</h1>

    <form onSubmit={handleSubmit(data => {
        onSubmit(data)
        reset()
    })}>


    <div className="mb-3">
        <input {...register('name')} id="name" type="text" className="form-control" placeholder="Name" />
        {errors.name && <p className='text-danger'>{errors.name.message}</p>}
    </div>

    <div className="mb-3">
        <input {...register('email')} id="email" type="email" className="form-control" placeholder="Email" />
        {errors.email && <p className='text-danger'>{errors.email.message}</p>}
    </div>

    <div className="mb-3">
        <input {...register('phone')} id="phone" type="text" className="form-control" placeholder="Mobile Phone" />
        {errors.phone && <p className='text-danger'>{errors.phone.message}</p>}
    </div>

    <button type="submit" className="btn btn-outline-primary rounded-0">Add contact</button>
    </form>
    </>)
}

export default UserForm
3 
import axios, { CanceledError } from "axios";
import { useEffect, useState } from "react";
import UserForm from "./components/UserForm";

interface User {
  id: number;
  name: string;
  email: string;
  phone: string;
}

const App = () => {

 const [users, setUsers] = useState <User[]> ([]);
 const [error, setError] = useState('');
 const [isLoading, setLoading] = useState(false);

 useEffect(() => {
  const controller = new AbortController();

  setLoading(true);
  axios
    .get <User[]> ('http://jsonplaceholder.typicode.com/users', {signal: controller.signal})
    .then((response) => {
      setUsers(response.data)
      setLoading(false);})
    .catch(error => {
      if (error instanceof CanceledError) return;
      setError(error.message)
      setLoading(false);})

  return () => controller.abort();
 }, [])

const deleteUser = ( user:User ) => {
  const originalUsers = [...users];
  setUsers(users.filter(u => u.id !== user.id ));
  axios
    .delete('http://jsonplaceholder.typicode.com/users/' + user.id)
    .catch(error => {
      setError(error.message)
      setUsers(originalUsers)
    })
}

const addUser = (newUser:User) => {
  setUsers( [...users, {...newUser, id: users.length + 1} ] )
  axios
    .post('http://jsonplaceholder.typicode.com/users/', newUser)
    .then(response => setUsers([response.data, ...users]))
}


  return (<>

    <div className="mb-5">
    <UserForm onSubmit={addUser} />
    </div>


    {error && <p className="text-danger">{error}</p>}
    {isLoading && <div className="spinner-border"></div>}
    <table className="table table-bordered">
      <thead>
        <tr>
          <th>id</th>
          <th>Name</th>
          <th>Email</th>
          <th>Phone</th>
          <th></th>
        </tr>
      </thead>

      <tbody>
        {users.map((user) => (
          <tr key={user.id}>
            <td>{user.id}</td>
            <td>{user.name}</td>
            <td>{user.email}</td>
            <td>{user.phone}</td>
            <td className="d-flex justify-content-center">
              <button
                className="btn btn-outline-danger rounded-0"
                onClick={() => deleteUser(user)}>Delete
              </button>
            </td> 
          </tr>
        ))}
      </tbody>
      </table>
    </>);
};

export default App;
4

Found the problem.
id has to be optional in zod and in the User interface :

id: z.number().optional(),

interface User {
  id?: number;
  name: string;
  email: string;
  phone: string;
}