SetState doesn't update when button is clicked - asp.net

Question

I'm trying to change the color at the button click using setState. But it doesn't change the state when the button is clicked. I have attached my App.js and Index.html files.
It works when I try it on Visual studio code. but it doesn't work in visual studio 2019 with asp.net mvc. I want to try it with Asp.net mvc with reactjs intergrated project
class Business extends React.Component {
constructor(props) {
super(props);
this.state = {color: "red" };
}
changeColor = () => {
this.setState({ color: "blue" });
}
render() {
return (
<div>
<h1>My Favorite Color is {this.state.color}</h1>
<button type="button" onClick={this.changeColor}>Change Color</button>
</div>
);
}
}
#using React.Web.Mvc
#{
ViewBag.Title = "Index";
}
<h2>Index</h2>
#Html.React("Business", new
{
})

Answer 1

Please update your code with as below:
class Business extends React.Component {
constructor(props) {
super(props);
this.state = {
color: "red"
};
}
changeColor = () => {
/*Please remove alert*/
alert('Working');
this.setState({ color: "blue" });
}
render() {
return (
<div>
<h1>
My Favorite Color is {this.state.color}
</h1>
<button type="button" onClick={this.changeColor}>Change Color</button>
</div>
);
}
}
export default Business;