React Forms

Form is used to take input from user

plaintext

function MyForm() {
  return (
    <form>
      <input type="text" />
    </form>
  )
}

By default page refresh on submit

React Form vs HTML Form

• HTML form handles data itself

• React form uses state to handle data

Controlled Component

• React controls input using state

• Data is stored in state

useState with Form

javascript

import { useState } from "react"

function MyForm() {
  const [name, setName] = useState("")

  const handleChange = (e) => {
    setName(e.target.value)
  }

  return (
    <input
      type="text"
      value={name}
      onChange={handleChange}
    />
  )
}

Show Input Value

plaintext

<p>{name}</p>

Initial Value

javascript

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

Important Points

• Use state to store input

• Use onChange to update value

• value comes from state

• React controls form

React Submit Forms

• When user clicks submit button

• Form is submitted

Problem in React

By default form refreshes page
But in React we do not want page reload

Solution

Use onSubmit event and prevent default

Example

javascript

import { useState } from "react"

function MyForm() {
  const [name, setName] = useState("")

  const handleChange = (e) => {
    setName(e.target.value)
  }

  const handleSubmit = (e) => {
    e.preventDefault()
    alert(name)
  }

  return (
    <form onSubmit={handleSubmit}>
      <input value={name} onChange={handleChange} />
      <button type="submit">Submit</button>
    </form>
  )
}

Key Points

• use onSubmit in form

• use preventDefault to stop refresh

• handle data using state

React Textarea

• HTML uses content inside textarea

• React uses value attribute

javascript

function MyForm() {
  const [text, setText] = useState("")

  return (
    <textarea
      value={text}
      onChange={(e) => setText(e.target.value)}
    />
  )
}

• textarea value comes from state

• onChange updates state

React Select

• HTML uses selected

• React uses value

plaintext

function MyForm() {
  const [car, setCar] = useState("Volvo")

  return (
    <select value={car} onChange={(e) => setCar(e.target.value)}>
      <option value="Ford">Ford</option>
      <option value="Volvo">Volvo</option>
    </select>
  )
}

• select value controlled by state

• onChange updates selected value

Multiple Input Fields

Problem

Many inputs need separate state

Solution

Use one state object

javascript

function MyForm() {
  const [inputs, setInputs] = useState({})

  const handleChange = (e) => {
    const name = e.target.name
    const value = e.target.value

    setInputs(values => ({ ...values, [name]: value }))
  }

  return (
    <>
      <input name="firstname" onChange={handleChange} />
      <input name="lastname" onChange={handleChange} />

      <p>{inputs.firstname} {inputs.lastname}</p>
    </>
  )
}

How it Works

• name attribute identifies field

• value comes from input

• state updates using spread operator

Initial Values

plaintext

const [inputs, setInputs] = useState({
  firstname: "John",
  lastname: "Doe"
})

Checkbox

Checkbox is used to select multiple options

Use checked instead of value

plaintext

function MyForm() {
  const [checked, setChecked] = useState(false)

  return (
    <input
      type="checkbox"
      checked={checked}
      onChange={(e) => setChecked(e.target.checked)}
    />
  )
}

Multiple Checkbox with Object State

plaintext

function MyForm() {
  const [inputs, setInputs] = useState({})

  const handleChange = (e) => {
    const name = e.target.name
    const value = e.target.type === "checkbox"
      ? e.target.checked
      : e.target.value

    setInputs(values => ({ ...values, [name]: value }))
  }

  return (
    <>
      <input type="checkbox" name="tomato" onChange={handleChange} />
      <input type="checkbox" name="onion" onChange={handleChange} />
    </>
  )
}

• Use checked for checkbox

• Use e.target.checked for value

• Use name to identify checkbox

Initial Values

plaintext

const [inputs, setInputs] = useState({
  tomato: true,
  onion: false
})

Radio

Radio is used to select only one option

All radio buttons must have same name

javascript

function MyForm() {
  const [fruit, setFruit] = useState("banana")

  return (
    <>
      <input
        type="radio"
        name="fruit"
        value="apple"
        checked={fruit === "apple"}
        onChange={(e) => setFruit(e.target.value)}
      /> Apple

      <input
        type="radio"
        name="fruit"
        value="banana"
        checked={fruit === "banana"}
        onChange={(e) => setFruit(e.target.value)}
      /> Banana
    </>
  )
}

• Use checked to control radio

• Compare state with value

• Same name for all radios