#167 Code: Write a React component which has two input fields name and age. When form is submitted then display name and age in the alert box.

🔹 Code: React Component with Name & Age Input:

import React, { useState } from "react";

function UserForm() {
  // State variables
  const [name, setName] = useState("");
  const [age, setAge] = useState("");

  // Handle form submit
  const handleSubmit = (e) => {
    e.preventDefault(); // prevent page reload
    alert(`Name: ${name}, Age: ${age}`);
  };

  return (
    <div style={{ margin: "20px" }}>
      <h2>User Form</h2>
      <form onSubmit={handleSubmit}>
        {/* Name Input */}
        <div>
          <label>Name: </label>
          <input
            type="text"
            value={name}
            onChange={(e) => setName(e.target.value)}
            placeholder="Enter your name"
            required
          />
        </div>

        {/* Age Input */}
        <div>
          <label>Age: </label>
          <input
            type="number"
            value={age}
            onChange={(e) => setAge(e.target.value)}
            placeholder="Enter your age"
            required
          />
        </div>

        <br />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

export default UserForm;

---

🔹 How It Works

1. useState() is used to store name and age.
2. onChange updates state as the user types.
3. handleSubmit prevents default page reload and shows an alert with the values.

---

👉 Output Example (if user enters):

• Name: Dev
• Age: 25

Then on submit →
alert("Name: Dev, Age: 25")