How to update nested state or values in Typescript and Reactjs?

Question

I am having Typescript errors if I try to update nested values of an object. This is my code.

type InterviewType = {
    time: string;
    person_name: string;
}
type FormState = {
    description: string | undefined;
    interviews: InteviewType[] | undefined;
};

const [formState, setFormState] = useState<FormState>({
    description: '',
    interviews: [],
});

useEffect(() => {
    setFormState({
      ...formState,
      description: interviewData?.data.description,
      interviews: interviewData?.data.interviews,
    });
}, [interviewData]);

interviewData might be like this

{
    data: {
        description: 'Some Description',
        interviews: [
            {
                time: '10:00 AM',
                person_name: 'xyz'
            },
            {
                time: '10:10 AM',
                person_name: 'xyz2'
            },
        ]
    }
}

When I try to update the time with a new value dynamically by the below code, it is giving me an error

setFormState({
    ...formState,
    interviews: {
      ...formState.interviews,
      [index]: {
        ...formState.interviews[index],
        'time': val,
      },
    },
});

Types of property 'length' are incompatible. Type 'number | undefined' is not assignable to type 'number'. Type 'undefined' is not assignable to type 'number'. TS2322

Now, I can ignore this error by providing ignore ts comment and the code is working fine. But my reviewer didn't accept it and wanted me to remove ignore comments. Any solution or different way to this issue?

setFormState({
    ...formState,
    interviews: {
        // @ts-ignore: Object is possibly 'null'.
      ...formState.interviews,
      [index]: {
        // @ts-ignore: Object is possibly 'null'.
        ...formState.interviews[index],
        'time': val,
      },
    },
});

And somehow if I am able to avoid this error by implementing different logic then a new one will come saying Object is possibly 'null' or 'undefined'. TS2533. BTW interviewData is coming from the API. Hence it is obvious that fromState.interviews will be undefined or null initially. So, how can I avoid this error too?

Where is this number type coming from if you didn't specify (neither implicitly nor explicitly) it anywhere? — k-wasilewski
– k-wasilewski, Commented Jan 1, 2022 at 15:30
interviews should be an array, right? Your update code try to update it with an object — Doppio
– Doppio, Commented Jan 1, 2022 at 15:30
@k-wasilewski I am wondering myself but unable to find it that where it's coming from? — parth kabariya
– parth kabariya, Commented Jan 1, 2022 at 15:54
@Doppio interviews is an array of objects. I have tried to update by interviews: [ in updating formdata but then it is giving more errors in inner code. — parth kabariya
– parth kabariya, Commented Jan 1, 2022 at 16:09
interviews: { ...formState.interviews, [index]: { ...formState.interviews[index], 'time': val, }, }, this looks like object, not array — Doppio
– Doppio, Commented Jan 1, 2022 at 16:10

Doppio · Accepted Answer · 2022-01-01 16:21:41Z

1

Answering how to update array at index.

Assuming you want to update interview time at index

What the code does is, it loop through the interviews array, if the index match the index we want to update, we return a new updated object { ...interview, time: newTime }, else we keep the same object.

const updateInterview = (atIndex, newTime) => {
  setFormState({
    ...formState,
    interviews: formState.interviews.map((interview, i) => {
      if (atIndex === i) return { ...interview, time: newTime };
      return interview;
    })
  });
}

answered Jan 1, 2022 at 16:21

Doppio

2,19813 silver badges13 bronze badges

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

2 Comments

parth kabariya Over a year ago

Tried your code and now error changed to Object is possibly 'null' or 'undefined'. TS2533 if I put this line // @ts-ignore: Object is possibly 'null'. on line no 4 in your code, it is working. Which I don't want.

parth kabariya Over a year ago

I have solved Object is possibly 'null' or 'undefined'. TS2533 error by adding ? after the array. interviews: formState.interviews?.map. So it would be like if formState.interviews has some value then only execute the loop.

Collectives™ on Stack Overflow

How to update nested state or values in Typescript and Reactjs?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related