0
143
ViewsHow to detect radio button changed in React App
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
2 answers
Answer question0
There were some fixes to made.
- Use
onClickinstead ofonChangeevent to perform functions with radio buttons. Refer this answer for more. - According to your requirements, the
valueof your radio button should be hardcoded asvalue=1,value=2,value=3respectively. - Modify your
handleChangePermissionas 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
0
add the second argument to map(it work like iterator - from 0 to the last element of array - [0,1,2,3,4...] :
object.map((number, i) =>
<li defaultChecked ={() => setValue(item, i)}></li>
);
to detect change of radio - add just onChange() with function:
const function = () => {
//your code
}
<CustomInput onChange={() => function} type="radio" id={item[0] + i} name={item[0]} defaultChecked={setValue(item, i)} />