Typescript error using react-cookie setCookie - Type '{ [name: string]: any; }' has no compatible call signatures.ts(2349)

Question

I am using react-cookie in a react application with typescript but coming into the error

Cannot invoke an expression whose type lacks a call signature. Type '{ [name: string]: any; }' has no compatible call signatures.ts(2349)

when using setCookie as

const [setCookie] = useCookies(['example']);
const onLanguageSelect = (data: any) => {
  setCookie('example', data.value, { path: '/' });
};

the error is on the setCookie line.

How can I fix this error? Reading on this issue in other questions hasn't helped but if you know of a resource that can put me in the right direction, that would be great.

Answer 1

Following the react-cookie readme:

const [cookies, setCookie, removeCookie] = useCookies(['cookie-name']);

setCookie is the second item of the returned array.

In your code you get the first item, cookies, which you rename to setCookie.

The fix:

const setCookie = useCookies(['example'])[1];

Be carefull with array destructuring, it's quite sexy but may be sometimes misleading.