Iterate over array of objects to create multiple UI switches

Question

• I'm using React.js, typescript, and Material UI.

• I'm holding two boolean's in state, checkedA: false, checkedB: false.

• Notice they are hardcoded in, and I'd like to make them dynamic. Basically, I have array of objects, (a list of permissions) that will be passed through as props to this component. I'd like to iterate/ map over them, using their name (grabbed from the props array of objects), and replace "checkedA" and "checkedB" with their names.

• The reason being, the props array of objects (list of permissions) may change, and have 3 or 10 objects. So I'd like to be able to list them all and have a switch function which choses to turn on/off that permission.

• Please ask if you need more clarification. It's basically, how to map over an array of objects while having each one an individual and functionally UIswitch.

        export const PermissionList: React.FC<PermissionListProps> = props => {
            const classes = useStyles();
            const [state, setState] = React.useState({
                checkedA: false,
                checkedB: false,
            });
  
  
  
            const handleSwitchChange = (e:any) => {
                console.log(e.target.checked)
                setState({ ...state, [e.target.name]: e.target.checked });
            };
  
  
            return (
                <Container>
                    <Card>
                        <TableContainer className={classes.scroll} component={Paper}>
                            <Table aria-label="simple table">
                                <TableHead>
                                <TableRow>
                                    <TableCell className={classes.name} align="left">Permission Name</TableCell>
                                    <TableCell className={classes.description} align="left">Permission Description</TableCell>
                                    <TableCell align="left">Switch</TableCell>
                                </TableRow>
                                </TableHead>
                                <TableBody>
                                {props.data_permissions.map(p => (
                                    <TableRow key={p.name}>
                                        <TableCell className={classes.name}>{p.name}</TableCell>
                                        <TableCell className={classes.description}>{p.description}</TableCell>
                                        <TableCell>
                                        <FormGroup row className={classes.Permission}>
                                            <FormControlLabel
                                                control={<Switch checked={state.checkedA} onChange={handleSwitchChange} name="checkedA" />}
                                                label="Off/On"
                                                />
                                            </FormGroup>
                                            <FormControlLabel
                                                control={<Switch checked={state.checkedB} onChange={handleSwitchChange} name="checkedA" />}
                                                label="Off/On"
                                                />
                                            </FormGroup>
                                        </TableCell>
                                    </TableRow>
                                ))}
                                </TableBody>
                            </Table>
                        </TableContainer>
                    </Card>
                </Container>
            )
        };
  

Here's an example of the props/ array of objects that will be passed through:

        const data_permissions = [
            {
            "name": "Outreach",
            "description": "Configure Aspen's outbound dialer,Configure Aspen's outbound dialer,Configure Aspen's outbound dialer,Configure Aspen's outbound dialer",
            "permission_name": "outreach"
            },
            {
            "name": "Softphone",
            "description": "Access the Amazon Connect Softphone",
            "permission_name": "softphone"
            },
            {
            "name": "Metrics and Quality",
            "description": "Access Metrics and Quality",
            "permission_name": "metrics-quality"
            },
            {
            "name": "Cost Accounting",
            "description": "Access Cost Accounting",
            "permission_name": "cost-accounting"
            },
            {
            "name": "Embedded CRM",
            "description": "Access the Embedded CRM",
            "permission_name": "embedded-application"
            },
            {
            "name": "Admin Settings",
            "description": "Modify users, roles and feature settings across the organization.",
            "permission_name": "admin-access"
            }
        ];

Answer 1

I think you need to make an object which contains CheckedA and CheckedB values for all the objects in array and store it in state. SOmething like this: {Outreach: {CheckedA: true, CheckedB: false}, Softphone: {CheckedA: true, CheckedB: false} ... }

Can u try below code. I couldnt get to run & test it. SO let me know if there's any error.

      export const PermissionList: React.FC<PermissionListProps> = props => {
          const classes = useStyles();
          const [state, setState] = React.useState({});



          const handleSwitchChange = (e:any, pname:any) => {
              console.log(e.target.checked)
              setState({ ...state, pname: {[e.target.name]: e.target.checked }});
          };


          return (
              <Container>
                  <Card>
                      <TableContainer className={classes.scroll} component={Paper}>
                          <Table aria-label="simple table">
                              <TableHead>
                              <TableRow>
                                  <TableCell className={classes.name} align="left">Permission Name</TableCell>
                                  <TableCell className={classes.description} align="left">Permission Description</TableCell>
                                  <TableCell align="left">Switch</TableCell>
                              </TableRow>
                              </TableHead>
                              <TableBody>
                              {props.data_permissions.map(p => (
                                  <TableRow key={p.name}>
                                      <TableCell className={classes.name}>{p.name}</TableCell>
                                      <TableCell className={classes.description}>{p.description}</TableCell>
                                      <TableCell>
                                      <FormGroup row className={classes.Permission}>
                                          <FormControlLabel
                                              control={<Switch checked={state[p.name].checkedA} onChange={(e) => handleSwitchChange(e, p.name)} name="checkedA" />}
                                              label="Off/On"
                                              />
                                          </FormGroup>
                                          <FormControlLabel
                                              control={<Switch checked={state[p.name].checkedB} onChange={(e) => handleSwitchChange(e, p.name)} name="checkedB"/>}
                                              label="Off/On"
                                              />
                                          </FormGroup>
                                      </TableCell>
                                  </TableRow>
                              ))}
                              </TableBody>
                          </Table>
                      </TableContainer>
                  </Card>
              </Container>
          )
      };