reactjscheckboxmaterial-uidestructuringmui-x-data-grid

React - How to Set a checkbox from props using array destructring


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.


Solution

  • 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,
          });
        
      });
    
    }