Passing Arguments to Event Handlers

JavaScript
7

You are just calling the handler function one time on the first run.

You have to use an anonymous function like you did before (wrap it inside onClick={() => this.handleClick(7)}). Otherwise, it will just execute like with any normal function call.

If you set the value of display to an object, you have to access it like an object and get to the value(s). Not just try to render an object (not sure where display is used).

Also, you do not really need a separate handler method, you can call setState inline.

export class Calculator extends React.Component {
  constructor() {
    super();
    this.state = {
      display: "Initial Value"
    };
  }

  render() {
    return (
      <div className="App">
        <div>{this.state.display}</div>
        <button onClick={() => this.setState({ display: 7 })}>7</button>
      </div>
    );
  }
}
1 Like