.find() method: How i can return a boolean instead my finded object?

veroneseWithS :

I'm doing a multiple select and i'm using a .find() with the checked property to select the checkbox when the value is in the two arrays.

This is my list array:

const permissionsGroupList = [
    { name: 'Seller' },
    { name: 'Admins' }
];

   const [groupPermissions, setGroupPermissions] = useState([]);

<Select
  labelId="mult-check-permissions"
  id="demo-mutiple-checkbox"
  multiple
  label="Grupo de permissões"
  onChange={handleChangeGroupPermissions}
  value={groupPermissions}
  input={<Input disableUnderline={true} />}
  renderValue={selected => selected.join(", ")}
>
  {permissionsGroupList.map(permissionGroup => (
    <MenuItem key={permissionGroup.name} value={{ name: permissionGroup.name }}>
      <Checkbox
        checked={groupPermissions.find(
          group => group.name === permissionGroup.name
        )}
      />
      <ListItemText primary={permissionGroup.name} />
    </MenuItem>
  ))}
</Select>;

In my method .find() is returning the object that is found, how I can return true/false instead? I'm receiving this error because the Checkbox component expect a boolean

index.js:1 Warning: Failed prop type: Invalid prop checked of type object supplied to ForwardRef(Checkbox), expected boolean.

norbitrial :

You can validate if it returned a value with !!.

For example using as the following:

<Checkbox checked={!!groupPermissions.find(
                     group => group.name === permissionGroup.name
                  )}
/>

Think about the following:

const data = [1,2,3];

const result1 = !!data.find(e => e === 17);
const result2 = !!data.find(e => e === 2);

console.log(result1); // not found
console.log(result2); // found

I hope this helps!

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=346538&siteId=1