Why state is undefined or state is not working

Question

I have a piece of code in react js. I just take a state variable and print, the state is not working and I want to modify the state also by clicking the button. Nothing is working. I just see on the console, the state is still undefined. Here is the code.

import React, { Component } from 'react';

class ClassBasedComponent 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 ClassBasedComponent;

Can anyone explain or modifying my code where is the exact problem?

1. First I want to show "hi" if the state is true. then after clicking on the button it should display "bye".

    Thanks in advance.
   

Answer 1

This is how you access state.

{this.state.displayCancel?<>Hi</>: <>bye</>}