Display array of selected checkbox fields using React with Inertia in Laravel

@Sinnbeck This is what I have passed:

const { data, setData, processing, errors, put } = useForm({
            roles: Object.values(roles),
        });

Correct me if I'm wrong

@Emokores close. Pass the already selected roles down

const { data, setData, processing, errors, put } = useForm({
            roles: userRoles
        });
 

@Sinnbeck My problem is how to define userRoles, since I do not have the field in my users_table. I have a users_table, roles_table and role_user_table. So all the roles are defied in the role_user_table by a many-to-many relationship.

@Emokores you actually posted the code yourself

In the array you pass to inertia

'userRoles' => $user->roles->pluck('id'), 

@Sinnbeck It is still not passing the roles. This is what I've done in my UsersController:

public function edit(User $user)
{
        return Inertia::render('Admin/Users/Edit', [
            'roles'  => Role::all(),
            'user' => $user,
            'userRoles' => $user->roles->pluck('id'),
        ]);
  }

This is what I've done in my frontend:

{roles.map((role, index) => {
     return (
            <label className="flex items-center" key={index}>
                    <Checkbox name="roles[]" id={`role${role.id}`} value={role.id} checked={data.roles.includes(role.id)} handleChange={ handleChecked} required />
                     <span className="ml-2 text-sm text-indigo-600">
                             {role.role}
                      </span>
             </label>
      );
    }
)}

@Emokores so nothing is checked? If not, can you console.log(data.roles)

@Sinnbeck Yep, nothing is checked.

@Emokores can you console.log(data.roles)

@Sinnbeck This is what I get: [3] which I think is the data I passed for this record I've selected. In the object, this is what I get: 0: 3.

@Emokores try adding a console log inside the loop to see if you can find 3

{roles.map((role, index) => {
     return (
        console.log(data.roles, role.id, data.roles.includes(role.id)) 
            <label className="flex items-center" key={role.id}> //fixed. Never use index as key 
                    <Checkbox name="roles[]" id={`role${role.id}`} value={role.id} checked={data.roles.includes(role.id)} handleChange={ handleChecked} required />
                     <span className="ml-2 text-sm text-indigo-600">
                             {role.role}
                      </span>
             </label>
      );
    }
)}

@Sinnbeck I have just created a new record and given the role_id [1, 2]. When I go to the Edit.js and I try to pass other roles, I get [1, 2, '1', '2', '3']. This means the checkboxes are not editing the roles. They're simply adding to what's originally there because the checkboxes are not displaying the checked roles.

Now, when I add console.log(data.roles, role.id, data.roles.includes(role.id)) this is what I get:

(2) [1, 2] 1 true
(2) [1, 2] 2 true
(2) [1, 2] 3 false

@Sinnbeck is there a way to do this? I get those arrays listed above.

@Emokores Based on the console.log() you should have them checked. Is react throwing an error? Does it work if you just set them all to checked={true} ?

@Sinnbeck even when I set checked={true} they are still unchecked.

@Emokores Ok I cannot recreate that... Are your absolutely certain that you are passing it inside the Checkbox component? Or are you throwing it away (you had that issue with value earlier on)

@Sinnbeck oh my God! It worked. It was something wrong with the component. I threw away the checked values. I missed out checked props in the component. Thanks so much @sinnbeck. You've been helpful in my journey.

@Emokores Great to hear :) Happy to help. Its fun debugging a bit of react. People mostly ask vue related questions when it comes to inertia

@Sinnbeck That's because Vue is easy to use, especially in Laravel and it was integrated first into Laravel before React. You've helped me a great deal. There's not a lot of content on the web about React with Inertia.

@Emokores True. I had to figure out most of it myself. Luckily I have been using react for a few years before Inertia

@Sinnbeck And the developer community is lucky to have people like you to help others grow.