How Can A Function Value Is Displayed In A Html Tag With A Return Value From Addeventlisterner Click?

I am trying to build a calculator and want to print digits on the screen. I have not yet put the calculator algorithm, just only to print the digits on the screen. const Keys = ({c

Solution 1:

For this case, if you want to click on the button you don't need to add an addEventListener.

As you are using React, you can create a function to handle click. If you want to handle a keypress on the keyboard, that's the case to use addEventListener.

I changed your code a bit in order to make it work as expected. I didn't add any logic to make the calculator work but clicking on any button will add it to state and display on "screen".

This is what I did:

// "Keys" Component receives the calcKeys and the handleClick function.// It uses the handleClick function on the button onClick passing the current item keyconstKeys = ({ calcKeys, handleClick }) => (
  <divclassName="display-keys">
    {calcKeys.map(item => (
        <buttononClick={() => handleClick(item.key)}>{item.key}</button>
     ))}
  </div>
)

classAppextendsReact.Component {
  constructor(props) {
    super(props);
    this.state = {
      calcKeys: [{"key": "AC"},{"key": "CE"},{"key": "±"},{"key": "/"},{"key": "7"},{"key": "8"},{"key": "9"},{"key": "x"},{"key": "4"},{"key": "5"},{"key": "6"},{"key": "-"},{"key": "1"},{"key": "2"},{"key": "3"},{"key": "+"},{"key": "."},{"key": "0"}],
      value: '',
    };
    this.handleClick = this.handleClick.bind(this)
  }

  // Here I just receive the key and add it to state.// This is the place to add logic, check if the key is "AC" for example and clean the state, etc.handleClick(key) {
    const { value } = this.statethis.setState({ value: `${value}${key}` })
  }

  render() {
    const { value } = this.statereturn (
      <divclassName="display-container"><divclassName="screen">{value}</div><KeyscalcKeys={this.state.calcKeys}handleClick={this.handleClick} /></div>
    );
  }
}

You can test it in a working JSFiddle here