How to provide types correctly, when setting the state in react?

Question

I want to store an object in the react state with useState and pass setState down to a child component, but then I get an typescript error. What is wrong?

typescript Error

Argument of type '(oldPerson: any) => any' is not assignable to parameter of type 'Person'.

Code

interface Person {
name: string
age: number
job: string

}

const [person, setPerson] = useState<Person | null>()

const updateOldPerson={
  age: 70
}
    
setPerson((oldPerson) => ({
      ...oldPerson,
      ...updateOldPerson
 }))

are you calling setPerson in the same component? If you're passing it as props make sure that the props interfaces have the correct type. — Ramesh Reddy
– Ramesh Reddy, Commented Aug 19, 2021 at 15:53
useState<Person | null>() should be useState<Person | undefined>() — Ramesh Reddy
– Ramesh Reddy, Commented Aug 19, 2021 at 15:55
@RameshReddy I send the setState down to a child component. why is "null" not good? — vuvu
– vuvu, Commented Aug 19, 2021 at 16:02
If you want to use null then the initial state should be like useState<Person | null>(null). Add the props interface of the child component to the question. — Ramesh Reddy
– Ramesh Reddy, Commented Aug 19, 2021 at 16:05

Ramesh Reddy · Accepted Answer · 2021-08-19 16:36:17Z

2

If you want to use null type then the initial state shouldn't be undefined

const [person, setPerson] = useState<Person | null>(null)

In order to use both functional state update and normal state update, the type of setPerson can be

setPerson: Dispatch<SetStateAction<Person | null>>;

if you're passing this as a prop to a child component, the props interface should look like this

interface ChildProps {
  setPerson: Dispatch<SetStateAction<Person | null>>;
}


const Child: FunctionComponent<ChildProps> = ({ setPerson }) => {
  return (
    <button
      onClick={() => {
        const updatedPerson = {
          name: "vuvu",
          age: 69,
          job: "foo"
        };
        setPerson((prevPerson) => ({ ...prevPerson, ...updatedPerson }));
      }}
    >
      Update Person
    </button>
  );
};

Here's a working codesandbox example

and as the age, name, job properties are not optional, make sure that you update the state with a person object that has all three fields. Alternatively, you can make some fields optional, like

interface Person {
  name: string;
  age: number;
  job?: string; // this is optional
}

edited Aug 19, 2021 at 16:36

answered Aug 19, 2021 at 16:22

Ramesh Reddy

10.7k3 gold badges22 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

vuvu Over a year ago

Thank you for that great answer. In my case I only wanted to update the age, I didn't know that the fields need to be optional in the interface

jean182 · Accepted Answer · 2021-08-19 16:11:37Z

You need to add some conditional logic in your setPerson call, the reason why is because the state can be null, and if you spread a null value in an empty object it will return the empty object, so you won't be passing the required person attributes, just the age:

// Set this to null to infer better the types, usually useState() 
// means setting the state to undefined
const [person, setPerson] = React.useState<Person | null>(null);

After that you should add some logic inside your setState call to verify that you actually have a Person and not a null value:

const updateOldPerson = {
  age: 70
};

setPerson((oldPerson) => {
  if (oldPerson == null) {
    // You need to explicitly pass the Person attributes here because the state value is null
    return {
     ...updateOldPerson,
     name: "John",
     job: "N/A"
    };
  }

  return {
    ...oldPerson,
    ...updateOldPerson
  };
});

Check this sandbox to verify the behavior: https://codesandbox.io/s/frosty-swirles-152fu?file=/src/App.tsx

Collectives™ on Stack Overflow

How to provide types correctly, when setting the state in react?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related