Issue with TypeScript and React: Type error when adding a new user in expense tracker app

TypeScript
1

I’m encountering a type error while working on my expense tracker app using TypeScript and React. When I try to add a new user through the UserForm component, I’m getting the following error:

```Type object | UserObj is not assignable to type 'UserObj'.
Type {} is missing the following properties from type 'UserObj': id, name, username, email, address```

I have a UserObj interface that defines the structure of a user(located in a component called UserList(i exported the interface), including the nested address field.

```export interface UserObj {
  id: number;
  name: string;
  username: string;
  email: string;
  address: {
    street: string;
    suite: string;
    city: string;
    zipcode: string;
    geo: {
      lat: string;
      lng: string;
    };
  };
}

export interface Props {
  users: UserObj[];
  onDelete: (id: number) => void;
}```

The error occurs when I try to update the users state with the new user by using the spread operator: setUsers([…users, newUser]) located in the app component.

<UserForm

onSubmit={(data: UserObj) => { setUsers([…users, data]); }} />

import { UserObj } from "./UserList";

const schema = z.object({ name: z.string().min(3, { message: “Name must be atleast 3 characters” }), email: z.string().email({ message: “Invalid email format” }), city: z.string().min(6, { message: “City must be atleast 6 character” }), id:z.number() });

type FormData = z.infer;

interface Props {

onSubmit: (user: UserObj) => void; }

const UserForm = ({ onSubmit }: Props) => { const { register, handleSubmit, formState: { errors }, } = useForm({ resolver: zodResolver(schema) });

return (

2

Guessing it’s looking for all the fields in your UserObj object to be in the data object and all the ones mentioned in the error are missing in data. You’ll have to type the fields in your UserObj as nullable or else make sure data has all those fields in the UserObj.