# Problem - Trying to add user in user list

**URL:** <https://forum.codewithmosh.com/t/problem-trying-to-add-user-in-user-list/20832>\
**Category:** React\
**Created:** [June 15, 2023, 8:03pm UTC](https://forum.codewithmosh.com/t/problem-trying-to-add-user-in-user-list/20832 "2023-06-15T20:03:36Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Nikos](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/nikos/32/6239_2.png) [@Nikos](https://forum.codewithmosh.com/u/Nikos)\
**Post date:** [June 15, 2023, 8:03pm UTC](https://forum.codewithmosh.com/t/problem-trying-to-add-user-in-user-list/20832/1 "2023-06-15T20:03:37Z")

</div>

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](https://ibb.co/GVCZtc9)  
[UserForm.tsx here](https://ibb.co/KqHCQKk)

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

---

<div class="post-metadata">

**Author:** ![Nikos](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/nikos/32/6239_2.png) [@Nikos](https://forum.codewithmosh.com/u/Nikos)\
**Post date:** [June 15, 2023, 8:05pm UTC](https://forum.codewithmosh.com/t/problem-trying-to-add-user-in-user-list/20832/2 "2023-06-15T20:05:42Z")

</div>

```auto
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

```

---

<div class="post-metadata">

**Author:** ![Nikos](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/nikos/32/6239_2.png) [@Nikos](https://forum.codewithmosh.com/u/Nikos)\
**Post date:** [June 15, 2023, 8:06pm UTC](https://forum.codewithmosh.com/t/problem-trying-to-add-user-in-user-list/20832/3 "2023-06-15T20:06:21Z")

</div>

```auto
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;

```

---

<div class="post-metadata">

**Author:** ![Nikos](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/nikos/32/6239_2.png) [@Nikos](https://forum.codewithmosh.com/u/Nikos)\
**Post date:** [June 17, 2023, 1:29pm UTC](https://forum.codewithmosh.com/t/problem-trying-to-add-user-in-user-list/20832/4 "2023-06-17T13:29:37Z")

</div>

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

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

```

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

```