Fix - 'X' is not a function TypeError in React

avatar

Borislav Hadzhiev

Tue May 03 20222 min read

banner

Photo by Hannah Reding

Fix - 'X' is not a function TypeError in React #

The React.js "Uncaught TypeError: X is not a function" occurs when we try to call a value that is not a function as a function, e.g. calling the props object instead of a function. To solve the error, console.log the value you are calling and make sure it is a function.

is not a function react

Here is an example of how the error occurs.

App.js
import {useState} from 'react'; // 👇️ should take props object and not setCount directly // ⛔️ Uncaught TypeError: setCount is not a function function Child(setCount) { return ( <div> <button onClick={() => setCount(current => current + 1)}> Click </button> </div> ); } export default function App() { const [count, setCount] = useState(0); return ( <div> <Child setCount={setCount} /> <h2>Count: {count}</h2> </div> ); }

The Child component should take the props object, but instead we name it as setCount and try to call the props object in the component.

The best way to solve the error is to log the setCount value in the Child component and make sure it is a function.

The Child component should take a props object and should access the setCount function on the props.

App.js
import {useState} from 'react'; // 👇️ now component takes props object // and calls function as props.setCount function Child(props) { console.log('props obj:', props); return ( <div> <button onClick={() => props.setCount(current => current + 1)}> Click </button> </div> ); } export default function App() { const [count, setCount] = useState(0); return ( <div> <Child setCount={setCount} /> <h2>Count: {count}</h2> </div> ); }

Alternatively, you can destructure the props in the function's definition.

App.js
// 👇️ destructure the setCount prop // and use it directly function Child({setCount}) { return ( <div> <button onClick={() => setCount(current => current + 1)}>Click</button> </div> ); } export default function App() { const [count, setCount] = useState(0); return ( <div> <Child setCount={setCount} /> <h2>Count: {count}</h2> </div> ); }
Another common reason the "Uncaught TypeError: X is not a function" error occurs in React is when we try to call a function on a value of the incorrect type.

For example, if we try to call the pop() method on a value that is not an array we would get an error.

App.js
const obj = {}; // ⛔️ Uncaught TypeError: obj.pop is not a function obj.pop();

The pop() method should only be called on arrays, so trying to call it on any other type throws the "X is not a function" error because the pop function doesn't exist on the type.

The best way to debug this is to console.log the value you are calling the function on and make sure it is of the correct type.

App.js
const obj = {}; console.log(typeof obj); // 👉️ "object" console.log(Array.isArray(obj)); // 👉️ false

Once you make sure the value you are calling the method on is of the expected type and that the method is supported by said type, the error will be resolved.

You can also use a conditional to check if the value is of the correct type before calling the method.

App.js
const obj = {}; if (Array.isArray(obj)) { console.log(obj.pop()); }
Use the search field on my Home Page to filter through my more than 1,000 articles.