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 typeobject
supplied toForwardRef(Checkbox)
, expectedboolean
.
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