Typescript error when trying to setState based on previous state in React

Question

Hey I'm pretty new to typescript and I have a piece of state that I'm trying to alter in a child component based on the previous value but, I keep getting a type error when calling the setState function.

This is the function type

setPlayerCounts?: React.Dispatch<React.SetStateAction<number[]>>;

This is where I'm getting an error on the parameter of setPlayerCounts

if(setPlayerCounts && playerCount !== undefined)
      setPlayerCounts(prev => prev ? [...prev, playerCount] : [playerCount]);

Error:

Argument of type '(prev: number[]) => (number | undefined)[]' is not assignable to parameter of type 'SetStateAction<number[]>'.

Type '(prev: number[]) => (number | undefined)[]' is not assignable to type '(prevState: number[]) => number[]'.\n    Type '(number | undefined)[]' is not assignable to type 'number[]'.    
 
Type 'number | undefined' is not assignable to type 'number'.    
   
Type 'undefined' is not assignable to type 'number'.",
}]

Any help is appreciated.

Hello, do you have any reproducible code sample with your issue? Like code snippet, codesandbox? — kind user
– kind user, Commented Nov 8, 2022 at 22:36
Change definition to setPlayerCounts?: React.Dispatch<React.SetStateAction<number[] | undefined>>; — Shivam Jha
– Shivam Jha, Commented Nov 8, 2022 at 23:03

WebEXP0528 · Accepted Answer · 2022-11-08 22:57:53Z

2

setPlayerCounts(prev => [...(prev ?? []), playerCount!]);

answered Nov 8, 2022 at 22:57

WebEXP0528

6014 silver badges10 bronze badges

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

3 Comments

Nather Over a year ago

Thank You! Can I ask what that bang(!) operator does at the end of playerCount? because that's what fixed the error

WebEXP0528 Over a year ago

The (!) operator will force to no undefined type. ! is not null assertion operator.

LongYC Over a year ago

Do take note that non-null assertion doesn't change the runtime behaviour, if playerCount is null or undefined during runtime and your code doesn't handle it, you might still run into problems.

Collectives™ on Stack Overflow

Typescript error when trying to setState based on previous state in React

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related