Text : HTML Forms and useState()

 Code:

 

"use client";

import { useState } from "react";

const Home = () => {

  const [name, setName] = useState("");

  const [n1, setN1] = useState(0);

  const [n2, setN2] = useState(0);

  const [sum, setSum] = useState(0);

  const displayName = () => {

    alert("Good day " + name);

  };

  const calculate = () => {

    const x = parseInt(n1);

    const y = parseInt(n2);

    const z = x + y;

    setSum(z);

  }

  return (

    <>

      <h1>useState Hook</h1>

      <input

        type="text"

        value={name}

        onChange={(e) => {

          setName(e.target.value);

        }}

      />

      <button onClick={displayName}>Click Me!</button>

      <h5>Calculator</h5>

      <input

        type="number"

        value={n1}

        onChange={(e) => {

          setN1(e.target.value);

        }}

      />

      <input

        type="number"

        value={n2}

        onChange={(e) => {

          setN2(e.target.value);

        }}

      />

      <button onClick={calculate}>Calculate</button>

      <h3>Sum is {sum}</h3>

    </>

  );

};

export default Home;