I'm struggling to figure out what the problem is with my code.
interface history {
data: string,
przed: string | number,
po: string | number,
}
I have an interface outside of the Functional Component then inside I define how it's supposed to look like - no problem
const [history, setHistory] = useState<[history]>([{
data: '',
przed: '',
po: '',
}]);
then I have a onClick function which does this:
setHistory([ ... history , {
data: new Date().toISOString().slice(0, 10), // date
przed: fromTo, // number
po: valueToSave, // number
}]);
Everything works fine when compiled and tested in the browser, however VS Code is not liking my code at all with this error:
Argument of type '[history, { data: string; przed: number; po: string; }]' is not assignable to parameter of type 'SetStateAction<[history]>'.
Type '[history, { data: string; przed: number; po: string; }]' is not assignable to type '(prevState: [history]) => [history]'.
Type '[history, { data: string; przed: number; po: string; }]' provides no match for the signature '(prevState: [history]): [history]'.ts(2345)
How can I handle something like this? What does it mean?
You can use either history[] or Array<history> instead of [history] which means you want an array of history type or an array in which each elements will be of type history.
[history] means that it has an array that will contain an element of type history
history[] means you it is an array of type history
const [history, setHistory] = useState<history[]>([
{
data: "",
przed: "",
po: ""
}
]);
or you can also do as:
const [history, setHistory] = useState<Array<history>>([
{
data: "",
przed: "",
po: ""
}
]);