React08 – Forms

Below is a simple example of using a React form:

App.jsx:

import { useState } from 'react'
import FormSubmitChange from "./components/FormSubmitChange"

function App() {

  return (
    <>
    <h1>App</h1>
    <FormSubmitChange/>
    </>
  )
}

export default App

FormSubmitChange.jsx:

import { useState } from 'react';

const FormSubmitChange = ()=> {
  const [age, setAge] = useState("");

  function handleChange(e) {
    setAge(e.target.value);
  }

  function handleSubmit(e) {
    e.preventDefault();
    alert(age);
  }

  return (

    <>
    <h1>Form</h1>
    <form onSubmit={handleSubmit}>
        <label>
          Enter your age:
          <input
            type="number"
            value={age}
            onChange={handleChange}
            style={{ marginLeft: "10px" }}
          />
        </label>

        <button type="submit" style={{ marginLeft: "10px" }}>
          Send
        </button>
 
      </form>
    </>
  )
}

export default FormSubmitChange