There is a React MUI Datagrid with list of users and when a user row is clicked, another dialog window opens with individual details of an user. I use props to send the value from DataGrid to Dialog.
There are 2 checkbox fields (to see if user has Android or Ios device sign in rights which is loaded from backend) described as below
// Component
const UserDialogData = (props) =>{
const [platform, setPlatform] = useState({
Android: false,
Ios: false,
});
const { Android, Ios } = platform;
useEffect(() => {
// How to set the props.IsAndroid and props.isIos to be set sothat variables 'Android' and 'Ios' are set to the checbox
});
return(<>
<FormGroup row>
<FormControlLabel
control={
<Checkbox
size="small"
checked={Android}
onChange={handleChange}
name="Android"
/>
}
label="Android"
/>
<FormControlLabel
control={
<Checkbox
size="small"
checked={Ios}
onChange={handleChange}
name="Ios"
/>
}
label="iOS"
/>
</FormGroup>
</>);
}
Now I want to set the useEffect to set the boolean value to the setPlatform. Can anyone please help.
I am new to React and not able to find it.
I have tried and somehow found the answer by myself. I leave this post so that anyone who struggles like me can utilise it.
const UserDialogData = (props) =>{
const [platform, setPlatform] = useState({
Android: false,
Ios: false,
});
const { Android, Ios } = platform;
useEffect(() => {
setPlatform({
...platform,
Android: props.isAndroid,
Ios: props.isIos,
});
});
}