How to detect radio button changed in React App

Question

I have a react app where I have a table of radio buttons and I am looping through them

here is my code:

const setValue = (item, position) => {
    switch(item[0]) {
        case 'dashboard':
            if(permissions.dashboard == item[1]) {
                return true;
            }
            break;
        case 'user_management':
            if(permissions.user_management == item[1]) {
                return true;
            }
            break;
        case 'users_feedback':
            if(permissions.users_feedback == item[1]) {
                return true;
            }
            break;
        case 'settings':
            if(permissions.settings == item[1]) {
                return true;
            }
            break;
        case 'content_management':
            if(permissions.content_management == item[1]) {
                return true;
            }
            break;
        case 'influencers':
            if(permissions.influencers == item[1]) {
                return true;
            }
            break;
    }
}

const handleChangePermission = (e) => {
    console.log('Handle Change');
}

Object.entries(permissions).map((item, i) => (
     <tr className="permission-row" key={item[0]}>
         <td>{item[0]}</td>
         <td><input type="radio" id={item[0] + i} name={item[0]} defaultChecked={setValue(item, i)}  onChange={(e) => handleChangePermission(e.target.value)}/></td>
         <td><input type="radio" id={item[0] + i} name={item[0]} defaultChecked={setValue(item, i)} onChange={(e) => handleChangePermission(e.target.value)}/></td>
         <td><input type="radio" id={item[0] + i} name={item[0]} defaultChecked={setValue(item, i)}  onChange={(e) => handleChangePermission(e.target.value)}/></td>
     </tr>
))

and here what it looks like:

and this is the permissions object I have:

{
"dashboard": 3,
"user_management": 3,
"users_feedback": 3,
"settings": 3,
"content_management": 3,
"influencers": 3
}

I have an object with default values called permissions and I am successfully looping through them and displaying the right data. My question is, how do I detect a radio button change, so I can change it in that object permissions

Edit: I added the onChange method but still it is not triggering what seems to bet the problem here ??

P.S I'm using reactstrap library radio buttons for styling

Answer 1

There were some fixes to made.

1. Use onClick instead of onChange event to perform functions with radio buttons. Refer this answer for more.
2. According to your requirements, the value of your radio button should be hardcoded as value=1, value=2, value=3 respectively.
3. Modify your handleChangePermission as below.

JSX

  <td>
      <input
          type="radio" id={item[0] + i} 
          name={item[0]} defaultChecked={setValue(item, i)} 
          value="1" onClick={handleChangePermission} />
   </td>

Modified function

const handleChangePermission = (e) => {
    const name = e.target.name;
    const value = parseInt(e.target.value);
    permissions[name] = value;
  };

Here we simply define the handleChangePermission function to accept synthetic event so we can access the name and value of radio input button. Since the name and value of radio button are the same values for the key and value of permissions object we can assign access the key and modify the value as above

Here is the solution on sandbox