title: Unable to bind the Radio button and checkbox data on button click in react hooks
body: <p>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 data should bind to the Form.
  Here I am unable to bind the Inputs fields, but not the Radio and Checkboxes...</p>
  <pre><code>const Form = () =&gt; {
      const [data, setdata] = useState({
          &quot;UserName&quot; : &quot;&quot;,
            &quot;dropDown&quot; :&quot;&quot;,
            &quot;gender&quot; : &quot;&quot;,
            &quot;checking&quot; :&quot;&quot;
      })
  
      const [update, setUpdate] = useState([])
  
      const handleChange =(e)=&gt;{
       
          if(e.target.name !==&quot;gender&quot; &amp;&amp; e.target.name !==&quot;checking&quot;){
              setdata({...data,[e.target.name]:e.target.value});
          }else if(e.target.name ===&quot;gender&quot;){
                  let allgenders = document.getElementsByName(&quot;gender&quot;);
                  allgenders.forEach((allradio)=&gt;{
                            if(allradio.checked){
                              setdata({...data,[e.target.name]:e.target.value});    
                            }
                  })
          }else if(e.target.name ===&quot;checking&quot;){
                    let getallCheckboxes =[];
                    let allCheckboxes =document.getElementsByName(&quot;checking&quot;);
                    allCheckboxes.forEach((allchecks)=&gt;{
                                  if(allchecks.checked){
                                      getallCheckboxes.push(allchecks.value)
                                  }
                    });
                    setdata({...data,[e.target.name]:getallCheckboxes});     
                    
          }
  
      }
      useEffect(() =&gt; {
          getAllData();
  }, [])
  
     const handleSubmit=(e)=&gt;{
      e.preventDefault();
      // setUpdate({...data,update});
      // console.log(data);
        axios.post('http://localhost:3000/users',data).then((res)=&gt;{
          //   console.log(&quot;user added successfully&quot;);
          getAllData();
          handleClear();      
        })
  
     }
  
    const getAllData=()=&gt;{
      axios.get('http://localhost:3000/users').then((res)=&gt;{
          setUpdate(res.data);
         })
    }
  
  const deleteUser=(dating)=&gt;{
      console.log(dating);
      axios.delete('http://localhost:3000/users/'+dating.id).then(res=&gt;{
          getAllData();
      })
  }
  </code></pre>
  <p>This is the Funtions for Edit and update,Here I am able to bind the Inputs fields, but not the Radio and Checkboxes...</p>
  <pre><code> const editUser=(userData)=&gt;{
          setdata(userData)
      }
      
       const handleEdit=()=&gt;{
           console.log(data);
               axios.put('http://localhost:3000/users/'+data.id,data).then(res=&gt;{
              getAllData();
          })
       }
      
          return (
              &lt;React.Fragment&gt;
                  &lt;h1&gt;LordShiva&lt;/h1&gt;
                  &lt;div className=&quot;container mt-3&quot;&gt;
                      &lt;div className=&quot;row&quot;&gt;
                          &lt;div className=&quot;col-md-6&quot;&gt;
                              &lt;div className=&quot;card&quot;&gt;
                                  &lt;div className=&quot;card-header bg-success text-white&quot;&gt;
                                      &lt;h4&gt;Form&lt;/h4&gt;
                                      &lt;form&gt;
                                          &lt;div className=&quot;form-group&quot;&gt;
                                              &lt;input type=&quot;text&quot; className=&quot;form-control&quot; placeholder='UserName' name=&quot;UserName&quot; value={data.UserName} onChange={handleChange} /&gt;
                                          &lt;/div&gt;
                                          &lt;div className=&quot;form-group&quot;&gt;
                                              &lt;input name=&quot;phone&quot; className=&quot;form-control&quot; placeholder='PhoneNumber' name=&quot;PhoneNumber&quot; value={data.PhoneNumber} onChange={handleChange} /&gt;
                                          &lt;/div&gt;
      
                                          &lt;div className=&quot;form-group&quot;&gt;
                                              &lt;input name=&quot;email&quot; className=&quot;form-control&quot; placeholder='Email' value={data.email} onChange={handleChange} /&gt;
                                          &lt;/div&gt;
                                          &lt;div className=&quot;form-group&quot;&gt;
                                              &lt;select name=&quot;dropDown&quot; value={data.dropDown} onChange={handleChange} className=&quot;form-control&quot; &gt;
                                                  &lt;option value=&quot;&quot;&gt;&lt;/option&gt;
                                                  &lt;option value=&quot;Reactjs&quot;&gt;ReactJS&lt;/option&gt;
                                                  &lt;option value=&quot;JS&quot;&gt;JavaScript&lt;/option&gt;
                                                  &lt;option value=&quot;csCSSs&quot;&gt;CSS&lt;/option&gt;
                                                  &lt;option value=&quot;HTML&quot;&gt;HTML&lt;/option&gt;
                                              &lt;/select&gt;
                                          &lt;/div&gt;
                                          &lt;div class=&quot;form-row&quot;&gt;
                                              &lt;div className=&quot;form-group col-md-6&quot;&gt;
                                                  &lt;label className=&quot;font-weight-bold&quot;&gt;Gender : &lt;/label&gt;
                                                  &lt;span className=&quot;font-weight-bold&quot; &gt; Male &lt;input type=&quot;radio&quot; name=&quot;gender&quot; value={data.gender} onChange={handleChange}/&gt;&lt;/span&gt;
                                                  &lt;span className=&quot;font-weight-bold&quot; &gt;  Female &lt;input type=&quot;radio&quot; name=&quot;gender&quot; value={data.gender}  onChange={handleChange} /&gt;&lt;/span&gt;
                                              &lt;/div&gt;
                                              &lt;div class=&quot;form-check col-md-6&quot;&gt;
                                                  
                                                          &lt;label class=&quot;form-check-label&quot; for=&quot;gridCheck&quot;&gt;Course&lt;/label&gt;&lt;br /&gt;
                                                  &lt;input type=&quot;checkbox&quot; value=&quot;HTML&quot; name=&quot;checking&quot; value={data.checking} onChange={handleChange} /&gt; HTML &lt;br /&gt;
                                                  &lt;input type=&quot;checkbox&quot; value=&quot;JavaScript&quot; name=&quot;checking&quot; value={data.checking} onChange={handleChange} /&gt; JavaScript &lt;br /&gt;
                                                  &lt;input type=&quot;checkbox&quot; value=&quot;ReactJS&quot; name=&quot;checking&quot; value={data.checking} onChange={handleChange} /&gt; ReactJS &lt;br /&gt;
                                                  &lt;input type=&quot;checkbox&quot; value=&quot;CSS&quot; name=&quot;checking&quot; value={data.checking} onChange={handleChange} /&gt; CSS &lt;br /&gt;
                                                      
                                              &lt;/div&gt;
                                              &lt;div className=&quot;form-row&quot;&gt;
                                              &lt;button className=&quot;btn btn-cyan&quot; type=&quot;button&quot; onClick={handleSubmit}&gt;Submit&lt;/button&gt;
                                              &lt;button className=&quot;btn btn-cyan&quot; type=&quot;button&quot; onClick={handleEdit}&gt;UpdateData&lt;/button&gt;
                                              &lt;/div&gt;
                                          &lt;/div&gt;
                                      &lt;/form&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div className=&quot;col-md-12&quot;&gt;
                              &lt;div className=&quot;card mt-5&quot;&gt;
                                  &lt;div className=&quot;card-header blue-gradient text-white&quot;&gt;
                                      &lt;h4&gt;FormDetails&lt;/h4&gt;
                                      &lt;div&gt;
                                         &lt;div className=&quot;row mt-3&quot;&gt;
                                             &lt;div className=&quot;col&quot;&gt;
                                                 &lt;div className=&quot;table table-hover table-striped text-center table-primary&quot;&gt;
                                                      &lt;thead className=&quot;bg-dark text-white font-weight-bold&quot;&gt;
                                                          &lt;tr&gt;
                                                              &lt;th&gt;UserName&lt;/th&gt;
                                                              &lt;th&gt;DropDownValue&lt;/th&gt;
                                                              &lt;th&gt;Gender&lt;/th&gt;
                                                              &lt;th&gt;CheckboxValue&lt;/th&gt;
                                                              &lt;th&gt;EDIT&lt;/th&gt;
                                                              &lt;th&gt;DELETE&lt;/th&gt;
                                                          &lt;/tr&gt;
                                                      &lt;/thead&gt;
                                                      &lt;tbody&gt;
                                                            {
                                                                update.map(emp =&gt; {
                                                                    return(
                                                                        &lt;tr&gt;
                                                                          &lt;td&gt;{emp.UserName} &lt;/td&gt;
                                                                          &lt;td&gt;{emp.gender}&lt;/td&gt;
                                                                          &lt;td&gt;{emp.checking}&lt;/td&gt;
                                                                    &lt;td&gt;&lt;button className=&quot;btn btn-cyan font-weight-bold&quot; onClick={()=&gt;{editUser(emp)}}&gt;Edit&lt;/button&gt;&lt;/td&gt;  
                                                                          &lt;td&gt;&lt;button className=&quot;btn btn-green font-weight-bold&quot; onClick={()=&gt;{deleteUser(emp)}}&gt;Delete&lt;/button&gt;&lt;/td&gt;  
                                                                        &lt;/tr&gt;
                                                                    )
                                                                })
                                                            }
                                                      &lt;/tbody&gt;
                                                 &lt;/div&gt;
                                             &lt;/div&gt;
                                         &lt;/div&gt;
                                        
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/React.Fragment &gt;
          )
      }
  </code></pre>