React

by Guilherme Toti

HTML

<div id="app"></div>

React

// "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>
    );
  }
}

ReactDOM.render(<App />, document.querySelector("#app"))