The radio button doesn't react when I click on it, what could be the problem? - html

Question

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

Answer 1

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>

Answer 2

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

Answer 3

change onClick to onSubmit. it'll work