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

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?

Yoshi · Accepted Answer · 2021-07-28 10:49:40Z

2

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;
    );
  });
};

answered Jul 28, 2021 at 10:49

Yoshi

54.8k14 gold badges93 silver badges108 bronze badges

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

Comments

Rinkal Rohara · Accepted Answer · 2021-07-28 10:46:11Z

0

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;

answered Jul 28, 2021 at 10:46

Rinkal Rohara

3521 silver badge7 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related