useState is a React Hook that lets you add a state variable to your component.
How to reproduce it
import { Component } from "react";
export class StateDemo extends Component {
state = { title: "State" };
changeTitle = () => {
this.setState({ title: "State demo" });
};
title = this.state.title;
render() {
return (
<>
<h1>{this.title}</h1>
<button onClick={this.changeTitle}>Change title</button>
</>
);
}}
Solution
Create a variable inside the render() method instead of the property in the class.
import { Component } from "react";
export class StateDemo extends Component {
state = { title: "State" };
changeTitle = () => {
this.setState({ title: "State demo" });
};
render() {
const title = this.state.title;
return (
<>
<h1>{title}</h1>
<button onClick={this.changeTitle}>Change title</button>
</>
);
}
}
