Unable to bind the Radio button and checkbox data on button click in react hooks

Question

I am having a form, When I submit the data it is going to server and I displayed the data in a table.. In the Table I am having edit button, When clicked on Edit button, the dat

Answer 1

Change state to

const [data, setdata] = useState({
  UserName: "",
  dropDown: "",
  gender: null,
  checking: []
});

Update the handler to access the radio and checkbox id attributes

const handleChange = (e) => {
  if (e.target.name !== "gender" && e.target.name !== "checking") {
    setdata({ ...data, [e.target.name]: e.target.value });
  } else if (e.target.name === "gender") {
    let allgenders = document.getElementsByName("gender");
    allgenders.forEach((allradio) => {
      if (allradio.checked) {
        setdata({ ...data, [e.target.name]: e.target.id }); // <-- grab input id
      }
    });
  } else if (e.target.name === "checking") {
    let getallCheckboxes = [];
    let allCheckboxes = document.getElementsByName("checking");
    allCheckboxes.forEach((allchecks) => {
      if (allchecks.checked) {
        getallCheckboxes.push(allchecks.id); // <-- grab checkbox id
      }
    });
    setdata({ ...data, [e.target.name]: getallCheckboxes });
  }
};

Update/add handleClear to reset the state

handleClear = () => {
  setdata({
    UserName: "",
    dropDown: "",
    gender: null,
    checking: []
  });
};

Add id properties and change the value prop to checked and pass a boolean value

<label className="font-weight-bold">Gender : </label>
<span className="font-weight-bold">
  <label>
    Male
    <input
      id="male"
      type="radio"
      name="gender"
      checked={data.gender === "male"}
      onChange={handleChange}
    />
  </label>
</span>
<span className="font-weight-bold">
  <label>
    Female
    <input
      id="female"
      type="radio"
      name="gender"
      checked={data.gender === "female"}
      onChange={handleChange}
    />
  </label>
</span>

...

<label class="form-check-label" for="gridCheck">
  Course
</label>
<br />
<label>
  <input
    id="HTML"
    type="checkbox"
    name="checking"
    checked={data.checking.includes("HTML")}
    onChange={handleChange}
  />
  HTML
</label>
<br />
<label>
  <input
    id="JavaScript"
    type="checkbox"
    name="checking"
    checked={data.checking.includes("JavaScript")}
    onChange={handleChange}
  />
  JavaScript
</label>
<br />
<label>
  <input
    id="ReactJS"
    type="checkbox"
    name="checking"
    checked={data.checking.includes("ReactJS")}
    onChange={handleChange}
  />
  ReactJS
</label>
<br />
<label>
  <input
    id="CSS"
    type="checkbox"
    name="checking"
    checked={data.checking.includes("CSS")}
    onChange={handleChange}
  />
  CSS
</label>