React - Űrlap

import './App.css';
import { useState } from "react";
 
 
function App() {
 
  const [base, setBase] = useState();
  const [height, setHeight] = useState("");
  const [area, setArea] = useState("");
 
  function calcTriangleArea() {
    let area = base * height / 2
    setArea(area)
  }
 
  return (
    <div className="App">
 
        <div>
          <label>Alap</label>
          <input type="text" onChange={(e) => setBase(e.target.value)} />
        </div>
        <div>
          <label>Magasság</label>
          <input type="text" onChange={(e) => setHeight(e.target.value)} />
        </div>
        <button onClick={calcTriangleArea}>Számít</button>
        <div>
          <label>Terület</label>
          <input type="text" value={area} readOnly />
        </div>
 
    </div>
  );
}
 
export default App;