title: Radio Button in react js
body: <p>The problem i have is that the program is able to change the values from male to female but not the other way around. </p>
  
  <p>The program displays a list of elements and this page has the option to delete those items. On editing the items everything is working fine, but when i try to change the gender from female to male, it does not change to and remains to be female. </p>
  
  <pre><code>import React, { Component } from "react";
  
  class Users extends Component {
    // call updateUser (App.js)
    handleUpdate = () =&gt; {
      this.props.updateUser(
        this.indexNum,
        this.name.value,
        this.age.value,
        this.gender.value,
        this.dept.value,
        this.occu.value,
        this.salary.value,
        this.daysWorked.value,
        this.leaves.value,
        this.message.value
      );
    };
  
    render() {
      const { allUsers, pressEditBtn, pressDelete } = this.props;
  
      const usersList = allUsers.map((user, index) =&gt; {
        return user.isEditing === true ? (
          &lt;tr key={index}&gt;
            &lt;td&gt;
              &lt;input
                type="text"
                ref={val =&gt; {
                  this.name = val;
                }}
                required
                defaultValue={user.name}
              /&gt;
            &lt;/td&gt;
            &lt;td&gt;
              &lt;input
                type="number"
                ref={val =&gt; {
                  this.age = val;
                }}
                required
                defaultValue={user.age}
              /&gt;
            &lt;/td&gt;
            &lt;td&gt;
              &lt;input
                name="gender"
                type="radio"
                value="male"
                ref={val =&gt; {
                  this.gender = val;
                }}
              /&gt;
              &lt;label&gt;male&lt;/label&gt;
              &lt;input
                name="gender"
                type="radio"
                value="female"
                ref={val =&gt; {
                  this.gender = val;
                }}
              /&gt;
              &lt;label&gt;female&lt;/label&gt;
            &lt;/td&gt;
            &lt;td&gt;
              &lt;label&gt;Department&lt;/label&gt;
              &lt;select
                ref={val =&gt; {
                  this.dept = val;
                }}
              &gt;
                &lt;option value="HR"&gt;HR&lt;/option&gt;
                &lt;option value="IT"&gt;IT&lt;/option&gt;
                &lt;option value="Labour"&gt;Labour&lt;/option&gt;
                &lt;option value="BOD"&gt;BOD&lt;/option&gt;
                &lt;option value="Pantry"&gt;Pantry&lt;/option&gt;
              &lt;/select&gt;
            &lt;/td&gt;
            &lt;td&gt;
              &lt;input
                type="text"
                ref={val =&gt; {
                  this.occu = val;
                }}
                required
                defaultValue={user.occu}
              /&gt;
            &lt;/td&gt;
            &lt;td&gt;
              &lt;input
                type="number"
                ref={val =&gt; {
                  this.salary = val;
                }}
                required
                defaultValue={user.salary}
              /&gt;
            &lt;/td&gt;
            &lt;td&gt;
              &lt;input
                type="number"
                ref={val =&gt; {
                  this.daysWorked = val;
                }}
                required
                defaultValue={user.daysWorked}
              /&gt;
            &lt;/td&gt;
            &lt;td&gt;
              &lt;input
                type="number"
                ref={val =&gt; {
                  this.leaves = val;
                }}
                required
                defaultValue={user.leaves}
              /&gt;
            &lt;/td&gt;
            &lt;td&gt;
              &lt;input
                type="text"
                ref={val =&gt; {
                  this.message = val;
                }}
                required
                defaultValue={user.message}
              /&gt;
            &lt;/td&gt;
            &lt;td&gt;
              &lt;input
                type="button"
                value="Update"
                onClick={this.handleUpdate}
                ref={() =&gt; {
                  this.indexNum = index;
                }}
                className="btn green"
              /&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
        ) : (
          &lt;tr key={index}&gt;
            &lt;td&gt;{user.name}&lt;/td&gt;
            &lt;td&gt;{user.age}&lt;/td&gt;
            &lt;td&gt;{user.gender}&lt;/td&gt;
            &lt;td&gt;{user.dept}&lt;/td&gt;
            &lt;td&gt;{user.occu}&lt;/td&gt;
            &lt;td&gt;{user.salary}&lt;/td&gt;
            &lt;td&gt;{user.daysWorked}&lt;/td&gt;
            &lt;td&gt;{user.leaves}&lt;/td&gt;
            &lt;td&gt;{user.message}&lt;/td&gt;
            &lt;td&gt;
              &lt;button
                className="btn white black-text"
                onClick={() =&gt; pressEditBtn(index)}
              &gt;
                Edit
              &lt;/button&gt;{" "}
              |{" "}
              &lt;button className="btn red" onClick={() =&gt; pressDelete(index)}&gt;
                Delete
              &lt;/button&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
        );
      });
  
      return (
        &lt;table className="striped"&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              &lt;th&gt;Name&lt;/th&gt;
              &lt;th&gt;Age&lt;/th&gt;
              &lt;th&gt;Gender&lt;/th&gt;
              &lt;th&gt;Department&lt;/th&gt;
              &lt;th&gt;Occupation&lt;/th&gt;
              &lt;th&gt;Salary&lt;/th&gt;
              &lt;th&gt;Days Worked&lt;/th&gt;
              &lt;th&gt;Leaves&lt;/th&gt;
              &lt;th&gt;Message&lt;/th&gt;
              &lt;th&gt;Action&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;{usersList}&lt;/tbody&gt;
        &lt;/table&gt;
      );
    }
  }
  
  export default Users;
  
  </code></pre>