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

Gender : 

  
    Male
    
  


  
    Female
    
  


...


  Course




  
  HTML




  
  JavaScript




  
  ReactJS




  
  CSS