React data-binding demo

App.js

import React from 'react';
import ReactDOM from 'react-dom';

function App() {
  const [number1, setNumber1] = React.useState();
  const [number2, setNumber2] = React.useState();
  const [total, setTotal] = React.useState(0);

  let calculateTotal = () => setTotal(number1 + number2);

  React.useEffect(() => {
    calculateTotal();
  }, [number2, number1]);

  return (
    <div>
      <h2>ReactJS Data binding demo</h2>
      <input
        value={number1}
        onChange={(e) => setNumber1(+e.target.value)}
        placeholder="First Number"
        type="number"
      />
      <input
        value={number2}
        onChange={(e) => setNumber2(+e.target.value)}
        placeholder="Second Number"
        type="number"
      />
      <p>Total: {total}</p>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));