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

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.

CodePudding user response：

You don't even need useEffect here. Just set the props values in two different boolean states and use them accordingly. Try like this:

const UserDialogData = (props) => {
 const [isAndroid, setIsAndroid] = useState(props.isAndroid);
 const [isIos, setIsIos] = useState(props.isIos);

 return (
  <>
   <FormGroup row>
    <FormControlLabel
     control={
      <Checkbox
       size="small"
       checked={isAndroid}
       onChange={() => {
        setIsAndroid(!isAndroid)
       }}
       name="Android"
      />
     }
     label="Android"
    />
    <FormControlLabel
     control={
      <Checkbox
       size="small"
       checked={isIos}
       onChange={() => {
        setIsIos(!isIos)
       }}
       name="Ios"
      />
     }
     label="iOS"
    />
   </FormGroup>
  </>
 );
};

CodePudding user response：

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

}

CodePudding user response：

i wanted to make a small edit to your answer it's better to get the oldPlatformData from the state so instead of this

   useEffect(() => {
      setPlatform({
        ...platform,
        Android: props.isAndroid,
        Ios: props.isIos,
      }); 
  });

use this

   useEffect(() => {
      setPlatform((prevSate) =>({
        ...prevSate,
        Android: props.isAndroid,
        Ios: props.isIos,
      }))
     });