Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Checkbox map checked from 2 arrays

I have an array that creates checkboxes, which works, but I also have another array which is constructed from a user array including the rights a user has. Now based on that second array, I want to have a checkbox shown checked if the user has that specific right.

Here is what I have:

return (
    <>
        {listOfRights.map((item, index) => {
            const roleChecked = userRoles.map((role) => role.RoleId === item.id);
            return <Form.Check
                key={index}
                inline
                name="userRights"
                isInvalid={!!errors.user_rights}
                label={getRightsTitle(item.roleName)}
                value={item.id}
                onChange={handleChange}
                id={`user_rights-${item.id}`}
                checked={roleChecked}
            />
         })}
    </>
)

listOfRights has all the rights, which shows the correct amount of checkboxes with each right. userRoles shows an array of:

[{
    id: 1,
    RoleId: 1,
    UserId: 1
}]

What now happens is that all the checkboxes are checked and not just the one having the right the user has.

What am I missing?

Tags:

2

Answers


  1. 0

    The answer here is in your one-liner. You are setting your checkbox to a falsy "null" value instead of setting it to false — A "null" value is still a value, so it will check the box.

    Instead you should be setting the checkbox to false, then mapping, using an if, then set to true if the IDs match.

    Am I going to use a multiline so that it makes more sense:

    const roleChecked = false;

userRoles.map((role) => {
    if (role.RoleId === item.id){
        roleChecked = true;
    }
)};

    That should solve your falsy value and your checkboxes being mistakenly checked.

    Login or Signup to reply.
  2. 0

    userRoles.map( ... ) produces an array of boolean values, and you then feed that whole array of booleans into checked={ ... }.

    You most likely need to use some(), which produces a single boolean value:

    const roleChecked = userRoles.some((role) => role.RoleId === item.id);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search