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 key
const Keys = ({ calcKeys, handleClick }) => (
  <div className="display-keys">
    {calcKeys.map(item => (
        <button onClick={() => handleClick(item.key)}>{item.key}</button>
     ))}
  </div>
)

class App extends React.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.state

    this.setState({ value: `${value}${key}` })
  }

  render() {
    const { value } = this.state
    return (
      <div className="display-container">
        <div className="screen">{value}</div>
        <Keys calcKeys={this.state.calcKeys} handleClick={this.handleClick} />
      </div>
    );
  }
}

You can test it in a working JSFiddle here