So I have a simple form with a few inputs and two radio buttons, but when I click any of them, they seem like they don't react. What could be the problem?

import { useState } from "react";
import uuid from "react-uuid";
import "./style.css";

export default function LargeForm() {
  const [people, setPeople] = useState([]);

  const [newUser, setNewUser] = useState({
    id: uuid(),
    firstName: "",
    lastName: "",
    sex: "",
    dateOfBirth: "",
    email: "",
    contact: "",
    password: ""
  });

  const handleChange = (value, type) => {
    setNewUser((prev) => {
      return { ...prev, [type]: value };
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (
      newUser.firstName &&
      newUser.lastName &&
      newUser.dateOfBirth &&
      newUser.email &&
      newUser.contact &&
      newUser.password
    ) {
      setPeople([...people, newUser]);
      setNewUser({
        firstName: "",
        lastName: "",
        sex: "",
        dateOfBirth: "",
        email: "",
        contact: "",
        password: ""
      });
    } else {
      console.log("Error!");
    }
  };

  return (
    <>
      <form className="container" autoComplete="off" onSubmit={handleSubmit}>
        <div>
          <label htmlFor="firstName" className="label">
            First name:{" "}
          </label>
          <input
            type="text"
            id="firstName"
            name="firstName"
            className="input"
            value={newUser.firstName}
            onChange={(e) => handleChange(e.target.value, "firstName")}
          />
          <br />
          <label htmlFor="lastName" className="label">
            Last name:{" "}
          </label>
          <input
            type="text"
            id="lastName"
            name="lastName"
            className="input"
            value={newUser.lastName}
            onChange={(e) => handleChange(e.target.value, "lastName")}
          />
          <br />
          <label htmlFor="sex" className="label">
            Sex:
          </label>
          <input
            type="radio"
            id="male"
            name="sex"
            value={newUser.sex}
            onChange={(e) => handleChange(e.target.value, "sex")}
          />
           <label for="male">Male</label> {" "}
          <input
            type="radio"
            id="female"
            name="sex"
            value={newUser.sex}
            onChange={(e) => handleChange(e.target.value, "sex")}
          />
          <label for="female">Female</label>
          <br />
          <label htmlFor="dateOfBirht" className="label">
            Date of birth:{" "}
          </label>
          <input
            type="date"
            id="dateOfBirht"
            name="dateOfBirht"
            className="input"
            value={newUser.dateOfBirth}
            onChange={(e) => handleChange(e.target.value, "dateOfBirth")}
          />
          <br />
          <label htmlFor="email" className="label">
            Email:{" "}
          </label>
          <input
            type="email"
            id="Email"
            name="Email"
            className="input"
            value={newUser.email}
            onChange={(e) => handleChange(e.target.value, "email")}
          />
          <br />
          <label htmlFor="contact" className="label">
            Contact:{" "}
          </label>
          <input
            type="text"
            id="contact"
            name="contact"
            className="input"
            value={newUser.Contact}
            onChange={(e) => handleChange(e.target.value, "contact")}
          />
          <br />
          <label htmlFor="password" className="label">
            Password:{" "}
          </label>
          <input
            type="password"
            id="password"
            name="password"
            className="input"
            value={newUser.password}
            onChange={(e) => handleChange(e.target.value, "password")}
          />
        </div>
        <br />
        <button type="submit" className="btn">
          Submit
        </button>
      </form>
      {people.map((person) => {
        return (
          <div className="list" key={person.id}>
            {person.firstName}
            <br />
            {person.lastName}
            <br />
            {person.sex}
            <br />
            {person.dateOfBirth}
            <br />
            {person.email}
            <br />
            {person.contact}
            <br />
            {person.password}
          </div>
        );
      })}
    </>
  );
}

The CodeSandbox link is given below.

https://codesandbox.io/s/learning-react-5vj5g?file=/src/useReducer/exampleForm/LargeForm.js

CodePudding user response：

In your code you are setting handleSubmit to be called on onClick of the form. That means anything that you do on that form HTML element it will be a click event first.

It is a small change from onClick to onSubmit

...
<form className="container" autoComplete="off" onSubmit={handleSubmit}>
...

Also the part where you define radio inputs, you should use checked state of that input and set value to be the desired value for that radio input:

<label htmlFor="sex" className="label">
  Sex:
</label>
<input
  type="radio"
  id="male"
  name="sex"
  value='male'
  checked={newUser.sex === 'male'}
  onChange={(e) => handleChange(e.target.value, "sex")}
/>
 <label for="male">Male</label> {" "}
<input
  type="radio"
  id="female"
  name="sex"
  value='female'
  checked={newUser.sex === 'female'}
  onChange={(e) => handleChange(e.target.value, "sex")}
/>
<label for="female">Female</label>

CodePudding user response：

You must use checked attribute to specify which item is checked. And use value property to set the value of any radio item. You also define onClick attribute on Form tag that it's incorrect and you must use onSubmit instead of that.

This is the correct link:

https://codesandbox.io/s/learning-react-forked-4wic3

CodePudding user response：

change onClick to onSubmit. it'll work