Answers for "change boolean value on click react"

change boolean value on click react

class Q1 extends Component {

constructor(props) {
     super(props);
    this.state = { page1: false,
    page2:false,
  page3:false }
    this.handleClick1= this.handleClick1.bind(this);
    this.handleClick2= this.handleClick2.bind(this);
    this.handleClick3= this.handleClick3.bind(this);
  }

  handleClick1() {
    this.setState({ page1: true}) 
    console.log("button1 clicked")
}

  handleClick2() {
    this.setState({ page2: true}) 
    console.log("button2 clicked")
}

  handleClick3() {
    this.setState({ page3: true}) 
    console.log("button3 clicked ")
}

  render() {

        return ( 
          <div>
  <button onClick={this.handleClick1}
  >Event Giveaway</button><br/>

  <button onClick={this.handleClick2}
  >Corporate Merchandise</button><br/>

  <button onClick={this.handleClick3}>
    Rewards & Recognition</button><br/>

<a href="/"  class="back_button"><ArrowBackIcon style={{color:"white"}}/></a>
    
  {
    this.state.page1 ?
    (
      <a href="/q2">Next</a>
    )
    :
    (
      this.state.page2 ?
      (
        <a href="/q22">Next</a>
      ) :
      (this.state.page3 ?
      (
        <a href="/q23">Next</a>
      )
      :
      (
        <a href="">Next</a>
      )
    )
    )
  }