Forms in React. An example will be given using the following concepts: input-type-text, text, area-value-area, input-type-checkbox, input-radio-name-fruit y form-onSubmit-handleSubmitOpciones.

View of all form components:

When you click the submit button, the following two dialog boxes will appear:

Here you can see all the component code:

import { useState } from 'react';

function Form2() {
  const [name, setName] = useState("");
  const [area, setArea] = useState("");
  //const [inputs, setInputs] = useState({});
  const [inputs, setInputs] = useState({
    firstname: 'John',
    tomato: true,
    onion: false
  });
  const [selectedFruit, setSelectedFruit] = useState('banana');

  const handleChangeOpciones = (e) => {
    const target = e.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;
    setInputs(values => ({...values, [name]: value}))
  }

  const handleSubmitOpciones = (event) => {
    let fillings = '';
    if (inputs.tomato) fillings += 'tomato';
    if (inputs.onion) {
      if (inputs.tomato) fillings += ' and ';
      fillings += 'onion';
    }
    if (fillings == '') fillings = 'no fillings';
    alert(`${inputs.firstname} wants a burger with ${fillings}`);    
    alert(`Your favorite fruit is: ${selectedFruit}`);
    

    event.preventDefault();
  };
  const handleChangeInputs = (e) => {
    const name = e.target.name;
    const value = e.target.value;
    setInputs(values => ({...values, [name]: value}))
  }

  const handleChangeRadio = (e) =>{
    setSelectedFruit(e.target.value);
  }

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

  function handleChangeArea(e){
    setArea(e.target.value);
  }


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

  return (
    <form onSubmit={handleSubmitOpciones}>
      <label>Enter your name:
        <input autoFocus
          type="text" 
          value={name}
          onChange={handleChange}
        />
        <br/>
      </label>
      <hr/>
      <label>Write here:
        <br/>
        <textarea
          value={area}
          onChange={handleChangeArea}
        />
      </label>
      <p>Current value: {area}</p>
      <hr/>
      <label>My name is:
      <input 
        type="text" 
        name="firstname" 
        value={inputs.firstname} 
        onChange={handleChangeOpciones}
      />
      </label>

      <p>I want a burger with:</p>
      <label>Tomato:
      <input 
        type="checkbox" 
        name="tomato" 
        checked={inputs.tomato} 
        onChange={handleChangeOpciones}
      />
      </label>
      <label>Onion:
        <input 
          type="checkbox" 
          name="onion" 
          checked={inputs.onion} 
          onChange={handleChangeOpciones}
        />
        </label>
      <p>Current values: {inputs.firstname} </p>

      <p>Select your favorite fruit:</p>
      <label>
        <input 
          type="radio" 
          name="fruit" 
          value="apple" 
          checked={selectedFruit === 'apple'} 
          onChange={handleChangeRadio} 
        /> Apple
      </label>
      <br />
      <label>
        <input 
          type="radio" 
          name="fruit" 
          value="banana" 
          checked={selectedFruit === 'banana'} 
          onChange={handleChangeRadio} 
        /> Banana
      </label>
      <br />
      <label>
        <input 
          type="radio" 
          name="fruit" 
          value="cherry" 
          checked={selectedFruit === 'cherry'} 
          onChange={handleChangeRadio} 
        /> Cherry
      </label>
      <br />

      <input type="submit" />
    </form>
  )
}

export default Form2;