calculator-hint.jsx

import { useState } from "react";

export default function Calculator() {
  function setNumber(number) {
    // TODO
  }

  function calculate() {
    // TODO
  }

  function clear() {
    // TODO
  }
  
  const expression = '5 x 3';

  return (
    <div>
      <input type="text" readOnly={true} value={expression} />
      <div>
        <button
          type="button"
          onClick={() => {
            setNumber(1);
          }}
        >
          1
        </button>
        <button
          type="button"
          onClick={() => {
            setNumber(2);
          }}
        >
          2
        </button>
        <button
          type="button"
          onClick={() => {
            setNumber(3);
          }}
        >
          3
        </button>
        <button
          type="button"
          onClick={() => {
            setOperation("/");
          }}
        >
          &divide;
        </button>
      </div>
      <div>
        <button
          type="button"
          onClick={() => {
            setNumber(4);
          }}
        >
          4
        </button>
        <button
          type="button"
          onClick={() => {
            setNumber(5);
          }}
        >
          5
        </button>
        <button
          type="button"
          onClick={() => {
            setNumber(6);
          }}
        >
          6
        </button>
        <button
          type="button"
          onClick={() => {
            setOperation("x");
          }}
        >
          x
        </button>
      </div>
      <div>
        <button
          type="button"
          onClick={() => {
            setNumber(7);
          }}
        >
          7
        </button>
        <button
          type="button"
          onClick={() => {
            setNumber(8);
          }}
        >
          8
        </button>
        <button
          type="button"
          onClick={() => {
            setNumber(9);
          }}
        >
          9
        </button>
        <button
          type="button"
          onClick={() => {
            setOperation("-");
          }}
        >
          -
        </button>
      </div>
      <div>
        <button
          type="button"
          onClick={() => {
            setNumber(0);
          }}
        >
          0
        </button>
        <button
          type="button"
          onClick={() => {
            calculate();
          }}
        >
          =
        </button>
        <button
          type="button"
          onClick={() => {
            clear();
          }}
        >
          C
        </button>
        <button
          type="button"
          onClick={() => {
            setOperation("+");
          }}
        >
          +
        </button>
      </div>
      <div>Output result here</div>
    </div>
  );
}