React radio not resetting the values - reactjs

Question

I am new to reactjs. I have radio buttons that say UserA, UserB, UserC, and User D. I have multiple permission for UserA based on sub-selection of radio buttons(Like Admin, Editor, User). Similarly, for UserD I can have only one permission like SuperAdmin. Whenever I select UserD, it should set the permission to 'Super Admin' which is working. But If I select another radio button, User D is not unselecting.
I believe it is because I am using the name as 'permission' on both the input fields(User D and UserA Admin sub option) which is not resetting the values in the state.
Here is the codepen for your reference. Any help would be much appreciated.
Thank you

Answer 1

You must have all input[radio-button]'s structure similar. You must be updating the state based on a condition. This code worked for me based on the given requirement. I have made some minor changes to the input userD and setState method. I hope this resolves your problem.
export default function Form() {
const [state, setState] = React.useState({
user: '',
testRequest: false,
permission: ''
});
const [disableuserA, setdisableuserA] = React.useState(false);
const [value, setValue] = React.useState(0);
const [selected, setSelected] = React.useState('');
function handleChange(e) {
const value =
e.target.type === 'checkbox' ? e.target.checked : e.target.value;
setState({
...state,
[e.target.name]: value,
...(e.target.name == 'user' &&
e.target.value == 'userD' && { permission: 'superAdmin' })
});
setSelected(e.target.value);
}
return (
<div className="app">
<form onSubmit={handleFormSubmit}>
<div>
<div>
<input
type="checkbox"
name="testRequest"
value={value}
onClick={() => setdisableuserA(!disableuserA)}
checked={state.testRequest}
onChange={handleChange}
/>
Enable this to hide the User A option
</div>
<div className="heading">user</div> <br />
<input
disabled={disableuserA}
type="radio"
name="user"
value="userA"
checked={selected === 'userA' || selected === 'admin'}
onChange={handleChange}
/>
UserA
<input
type="radio"
name="user"
value="userB"
checked={state.user === 'userB'}
onChange={handleChange}
/>
UserB
<input
type="radio"
name="user"
value="userC"
checked={state.user === 'userC'}
onChange={handleChange}
/>
UserC
<input
type="radio"
name="user"
value="userD"
checked={state.user === 'userD'}
onChange={handleChange}
/>
UserD
<br /> <hr />
<div
aria-hidden={
selected !== 'userA' &&
selected !== 'admin' &&
selected !== 'editor' &&
selected !== 'publisher'
? true
: false
}
>
<input
type="radio"
name="permission"
value="admin"
checked={state.permission === 'admin'}
onChange={handleChange}
/>{' '}
Admin
<input
type="radio"
name="permission"
value="editor"
checked={state.permission === 'editor'}
onChange={handleChange}
/>{' '}
Editor
<input
type="radio"
name="permission"
value="publisher"
checked={state.permission === 'publisher'}
onChange={handleChange}
/>{' '}
Publisher
</div>
<br /> <br />
<button type="submit" className="btn-default btn">
Submit{' '}
</button>
</div>
</form>
<pre>{JSON.stringify(state, null, 3)}</pre>
</div>
);
}
Live Demo