I am trying to convert my JSX code into typescript (TSX) and having a difficulty in passing the interface while using useState hook. All I want is an empty array Interface in my state and on updating i am pushing the object to the Array one by one.
I am getting Typed error on updating the count "Argument of type 'any[]' is not assignable to parameter of type 'SetStateAction'. Type 'any[]' is not assignable to type '(prevState: IData) => IData'. Type 'any[]' provides no match for the signature '(prevState: IData): IData'"
Here is the code i have done:
sample.tsx
const interface IData {
id: number
value: string
}
const Sample = () => {
let [count, setCount] = useState<IData>([]); <------------ Want to know how to pass the blank interface or Array and also how to update interface once values are pushed to the Array
const addCount = () => {
setCount([...count, {
id: count.length,
value: 'Condition ' + count.length
}])
}
const handleRemove = (id:number) => {
console.log(id);
const count_upd = count.filter((item:any) => item.id != id);
setCount(count_upd);
}
return(
<React.Fragment>
<Container>
{ Array(count).fill(<ConditionSeg Data={count.map((item:IData) => (
item.id,item.value
))}
HandleRemove ={handleRemove}
/>)}
</Container>
<Container>
<Button
onClick={addCount}>
Click me</Button>
</Container>
</React.Fragment>
)
}
P.S. Don't Mind the type errors.