react setstatus issue in the application - reactjs

Question

I am trying to change setState using button click. Please check my code
export class Mystate extends Component {
constructor( ) {
super();
this.state = {
message:'Click Me Friends'
}
}
clickme = () => {
alert('my alert');
this.setState = ({
message: 'Thank You'
})
}
render() {
return (
<div>
<h1>{this.state.message}</h1>
<button onClick={() =>this.clickme()}> Click </button>
</div>
);
}
}
I called the alert. It's working well, but state did not update. How do I update it?

Answer 1

The setState() is a function and you need to call:
this.setState({
message: "Thank You"
})
Remove the = after that in your code. Also, you can remove the following:
constructor() {
super();
this.state = {
message: "Click Me Friends"
}
}
And replace with:
state = {
message: "Click Me Friends"
}
Full Code
import React, { Component } from "react";
export default class Mystate extends Component {
state = {
message: "Click Me Friends"
};
clickme = () => {
alert("my alert");
this.setState = {
message: "Thank You"
};
};
render() {
return (
<div>
<h1>{this.state.message}</h1>
<button onClick={() => this.clickme()}> Click </button>
</div>
);
}
}

Answer 2

Pass the updated object to your setState method like below
this.setState({ message: "Thank You"});
Working Code - https://codesandbox.io/s/sweet-frost-gzcu1?file=/src/App.js:253-304

Answer 3

Don't assignment. setState() is a method you need to call it.
clickme = () => {
alert('my alert');
this.setState({
message: 'Thank You'
})
}
As you are using the arrow function you can avoid the inline arrow function here
instead of onClick={() =>this.clickme()} use like
<button onClick={this.clickme}> Click </button>