React with TypeScript: how to type useState hook with previous state - reactjs

Question

I have a React + TS application and I'm writing a custom hook to update the header of a table. Basically, I can click on different checkboxes and hide/show that specific column of the table.
const useHeader = (headerConfiguration: TableHeader[]) => {
const [header, setHeader] = useState(headerConfiguration);
const updateHeader = (column: string) => {
setHeader(prevState => { // <- this line has the error
prevState.forEach(el => {
if (el.name === column) el.visible = !el.visible;
});
});
};
return {
header,
updateHeader,
};
};
export default useHeader;
As the code shown, I need to update the visible property based on the column name.
Currently I have an error tough:
Argument of type '(prevState: TableHeader[]) => void' is not
assignable to parameter of type 'SetStateAction<TableHeader[]>'.
Type '(prevState: TableHeader[]) => void' is not assignable to type
'(prevState: TableHeader[]) => TableHeader[]'.
Type 'void' is not assignable to type 'TableHeader[]'.
I get what the error is saying but I'm not sure how to fix it, if I write the same function using the library Immer it works without any error:
setHeader(
produce(header, draftHeader => {
draftHeader.forEach(el => {
if (el.name === column) {
el.visible = !el.visible;
}
});
}),
);
How can I fix this?

Answer 1

When not using immer, you're responisble to produce and return a new state. So instead of manipulating prevState you need to create a copy of it, with the changes you require applied.
For example, with something like this:
const updateHeader = (column: string) => {
setHeader(prevState => {
// return a copy prevState
return prevState.map(
el => el.name === column
? {...el, visible: !el.visible} // copy inner item, if changed
: el;
);
});
};

Answer 2

Please try this:
const useHeader = (headerConfiguration: TableHeader[]) => {
const [header, setHeader] = useState(headerConfiguration);
const updateHeader = (column: string) => {
header.forEach(el => {
if (el.name === column) el.visible = !el.visible;
});
setHeader(header);
};
return {
header,
updateHeader,
};
};
export default useHeader;