This expression is not callable when destructuring an array of React hooks in TypeScript

Active3 hr before
Viewed126 times

7 Answers


Connect and share knowledge within a single location that is structured and easy to search.,I am especially confused why it thinks setErr is of type string, when it should be equal to the setNameError function destructured from useState.,Find centralized, trusted content and collaborate around the technologies you use most.

All you need is to add as const to the errors declaration:

  const errors = [
     [setNameError, name.length],
     [setEmailError, email.length]
  ] as
load more v

 Pretag team - issue, fix, solve, resolve

Hooks are a new addition in React 16.8. They let you use state, and other React features without writing a class. ,This explanation does not give me a lot of motivation to use React Hooks apart from “Classes are not cool, man!”,Wouldn’t it be easier just to make the useFetch depend on “skip”? Then in the click handler you could just update skip and React would handle refetching the data.

 Pretag team - issue, fix, solve, resolve

Explains some basic TS types usage and setup along the way.,Answers the most Frequently Asked Questions.,Does not cover generic type logic in detail. Instead we prefer to teach simple troubleshooting techniques for newbies.

import * as React from "react";
import * as ReactDOM from "react-dom";
load more v

React’s upcoming useState hook relies on array destructuring, let’s dive in and see how that feature works.,Luckily for us, we have Babel and TypeScript which can compile this newer syntax into something older browsers can support (and presumably to something we may be more familiar with). So my next step is to go to the online babel REPL and paste in the code. Here's what the result looks like:,Ok, interesting, so useReducer is actually over 100 lines of code, so let's just look at what useReducer returns:

.css-qnqv84{display:inline-block;width:2em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:0.3;}1import {useState} from 'react'23function Example() {4  // Declare a new state variable, which we'll call "count"5  const [count, setCount] = useState(0)67  return (8    <div>9      <p>You clicked {count} times</p>10      <button onClick={() => setCount(count + 1)}>Click me</button>11    </div>12  )13}
load more v

The value which is given as the right hand-side of for…of or as argument of a function such as Promise.all or TypedArray.from, is not an iterable object.  An iterable can be a built-in iterable type such as Array, String or Map, a generator result, or an object implementing the iterable protocol. ,In JavaScript, Objects are not iterable unless they implement the iterable protocol. Therefore, you cannot use for…of to iterate over the properties of an object., When they are not called, the Function object corresponding to the generator is callable, but not iterable. Calling a generator produces an iterable object which will iterate over the values yielded during the execution of the generator.

TypeError: 'x'
is not iterable(Firefox, Chrome)
TypeError: 'x'
is not a
function or its
return value is not iterable(Chrome)
load more v

In some cases, arrow functions can be even more concise:,var anonFunc = function() { do stuff here } ;,Can I use an async-await function instead of callback hell!

 Pretag team - issue, fix, solve, resolve

Other "typescript-react" queries related to "This expression is not callable when destructuring an array of React hooks in TypeScript"