CODEWITHSUNDEEP
reactjsbuttononclick
SPV
SPV

Reputation: 15

React button: how to make it change onClick

I'm learning React and I'm trying to make a button which will change on click. It must be ether "Succeed" or "Not succeed" depending on the server's answer. This is what I've done so far. My question is - what the handleClick function must do? Should I use transition by toggling classes? Thanks!

class Btn extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handlenClick.bind(this);
  }

  handleClick() {
    ???
  }
	
  render() {
    const succeed = (
      <div>
        <ButtonToolbar>
          <Button bsStyle="primary" bsSize="large">Succeed</Button>
        </ButtonToolbar>
      </div>
    )
		
    const notsucceed = (
      <div>
        <ButtonToolbar>
          <Button bsStyle="primary" bsSize="large">Not succeed</Button>
        </ButtonToolbar>
      </div>
		)
		
    return (
      <div onClick={this.handleClick.bind(this)}>
        {this.state ? succeed : notsucceed}
      </div>
    )
  }
};

Upvotes: 0

Views: 3424

Answers (2)

Daniel
Daniel

Reputation: 1953

You would call your api in there and set the state depending if the call fails or succeeeds. For this your api call must return a Promise. Something like:

handleClick() {
    Api.call()
     .then((response) => { this.setState({ succeed: true }); })
     .catch((error) => { this.setState({ succeed: false }); })
}

Upvotes: 0

Luis Nolazco
Luis Nolazco

Reputation: 1322

You need to implement the state.

For example: https://codesandbox.io/s/313vmr23k6

class Btn extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      succeed: false
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(previousState => {
      return {
        succeed: !previousState.succeed
      };
    });
  }

  render() {
    const succeed = (
      <div>
          <button bsStyle="primary" bsSize="large">Succeed</button>
      </div>
    )

    const notsucceed = (
      <div>
        <button bsStyle="primary" bsSize="large">Not Succeed</button>
      </div>
    )

    return (
      <div onClick={this.handleClick.bind(this)}>
        {this.state.succeed ? succeed : notsucceed}
      </div>
    )
  }
};

Upvotes: 1

Related Questions