7

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.

1 Answer 1

11

So as far as I can tell, you want to store an array of values of type IData. In this case you should use

let [count, setCount] = useState<IData[]>([]);

This means, you are storing an array of values of type IData. In your case above you forgot the array brackets, so setCount would actually expect a single object of type IData instead of an array.

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

5 Comments

ok got it so the interface will be type Array. thanks
can you also give me some idea on this as well Argument of type 'Element' is not assignable to parameter of type 'IData[]'. Type 'Element' is missing the following properties from type 'IData[]': length, pop, push, concat, and 28 more.ts(2345) 'ConditionSeg' cannot be used as a JSX component. Its return type 'Element[]' is not a valid JSX element. Type 'Element[]' is missing the following properties from type 'Element': type, props, key
So when i am passing this state as props to child i am getting this error stating Element is not assignable to parameter of type IData[]
Argument of type 'Element' is not assignable to parameter of type 'IData[]' ...: This means you use a value of type 'Element' somewhere in your code where a value of type 'IData[]' is expected. The 'Element' type is what is produced by react components.
'ConditionSeg' cannot be used as a JSX component. Its return type 'Element[]' is not a valid JSX element.: This means you return an array in 'ConditionSeg', but that is not valid. You should always return single elements of type 'Element'.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.