If you are new to React and get the error “React Hook ‘useState’ cannot be called in class component”, let’s follow this article. We will help you understand the causes and how to solve it with using the pointer “this” method or the function component method.
Why does the error “React Hook ‘useState’ cannot be called in class component” happen?
A helpful part is a Javascript (or ES6) capability that profits 1 component/1 Respond component.
So a React Functional Component is:
- A Javascript / ES6 function
- Must return a React element
- Take props as a parameter if needed
Here is an example of a case where the error React Hook’ useState’ cannot be called in the class component appears.
Code:
import {useState} from 'react';
class App {
render() {
const [name, setName] = useState("Ironman");
return (
<div>
<h2>React Hook 'useState' cannot be called in class component | LearnShareIT</h2>
<p>{name}</p>
<button onClick={() => setName("Tony Stark")}>Show real name</button>
</div>
);
}
}
export default App;Output:
We cannot use the useState hook in a Class Component, specifically the App component.
How to fix the error “React Hook ‘useState’ cannot be called in class component”?
Use the pointer “this” method
In JavaScript, we use this keyword to represent an object (Object). That object is the subject of the context or the code being run.
A few notes about this:
- This is the context of where the function containing this keyword is called.
- There are two types of context for this keyword: Object containing the method being called or Global, nothing more.
- So when you encounter this, you don’t care what it is? But only interested in where the function call contains it.
So we can use this pointer instead of useState in this case.
Code:
import React from 'react';
class App extends React. Component {
constructor(props) {
super(props)
this.state = {
name: "Ironman",
}
}
render() {
return (
<div>
<h2>React Hook 'useState' cannot be called in class component | LearnShareIT</h2>
<p>{this.state.name}</p>
<button onClick={() => this.setState({name:"Tony Stark"})}>Show real name</button>
</div>
);
}
}Output:
So when we initialize this. state in the class component’s props, we have created a state with its context that can usually be used.
So the above error has been fixed, or you can refer to the method below.
Use the function component method
This way, we will use the function component instead of the class component, which will help us avoid the above error because hooks are generated to match the function component.
Code:
import { useState } from "react";
export default function App() {
const [name, setName] = useState("Ironman");
return (
<div>
<h2>
React Hook 'useState' cannot be called in class component | LearnShareIT
</h2>
<p>{name}</p>
<button onClick={() => setName("Tony Stark")}>Show real name</button>
</div>
);
}After changing the App component to a function component, we can use the useState hook and get the same results with the above method. I hope these methods will be helpful to you.
Summary
To summarize, you have learned about how to fix the error “React Hook ‘useState’ cannot be called in class component” through the article. I recommend you to use the pointer “this” method because it will keep the core value of the original code. Wish you a good day!
Maybe you are interested:
- React hook useeffect has a missing dependency error
- “Cannot find name” error in React Typescript
- Cannot read property ‘pathname’ of undefined in React
Hi, my name’s Nathaniel Kirk. I’m interested in learning and sharing knowledge about programming languages. My strengths are C, C++, Python, HTML, CSS, Javascript, and Reactjs. If you have difficulty with them, don’t worry. I’m here to support you.
Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Python, HTML, CSS, Javascript, Reactjs