I am currently facing an issue with a piece of code I wrote in React JS. The state variable is not functioning as expected and even after modifying it upon button click, nothing seems to be working. After checking the console, I noticed that the state remains undefined. Here is the snippet of code:
import React, { Component } from 'react';
class ClassComponent extends Component {
constructor(){
super();
this.state = {
displayCancel: true
};
this.cancelRequest = this.cancelRequest.bind(this);
}
//cancel the request
cancelRequest() {
this.setState({displayCancel: false});
console.log(this.displayCancel);
}
render() {
return (
<>
<button onClick={this.cancelRequest}>Cancel</button>
{this.displayCancel?<>Hi</>: <>bye</>}
</>
)
}
}
export default ClassComponent;
I am seeking assistance in identifying and solving the issues in my code. Can anyone provide guidance on where the problem lies?The intention is to initially display "hi" if the state is true. Upon clicking the button, it should change to display "bye".
Your help is greatly appreciated.