Checkbox trigger multiple select with React

Question

I'm building a React application for my clients. Each Client, when log-in, can access different views for each his location office. So first I list all the office of the client, and for each its office, he cans select the views he wants to display.

My Problem :

Let say I have office 1 that can choose to access to view 1 and view 2 and office 2 that can access to the same views. When I click on view 1 for office 1, it triggers view 2 for office 2 also !

Here is the code :

<div >
        {
          //I take all the offices of a client
          officesArray.map((office, index) => {
            return (
              <div key={index}>
                <h3>site {(office.name)}</h3>
                <div key={index}>
                  //For each office I display the views available to select
                  viewsArray.map((view, index) => {
                    return (
                      <div>
                        <label
                          for={`${view.name}${office.name}`}
                        >
                          <input
                            key={`${index}${office.id}`}
                            type="checkbox"
                            id={`${view.name}${office.name}`}
                            name={`${view.name}${office.name}`}
                            value={`${view.name}${office.name}`}
                            checked={checkedState[index]}
                            onChange={() => handleOnChange(index, office.id)}
                          />
                          {view.name}
                        </label>
                      </div>
                    )
                  })}
                </div>
              </div>
            )
          })
        }
      </div>

And here is the handleonchange function :


const handleOnChange = (position, office) => {
    const updatedCheckedState = checkedState.map((item, index) =>
      index === position ? !item : item
    );
    prop.set({ id: (prop.views)[position].id_view, officeId: office })
    setCheckedState(updatedCheckedState);
  }

You have one and the same checkedState array for every office. You need separate once. Nested array for example. — Konrad
– Konrad, Commented Aug 30, 2022 at 15:45
Thanks. But here is the state const [checkedState, setCheckedState] = useState( new Array((numberOffices * nbreViews)).fill(false) ); So I should create as many state as offices. Is it possible ? — Arthur Fortin
– Arthur Fortin, Commented Aug 30, 2022 at 15:57
exactly. I'm only using the two first parts, the two other are always false — Arthur Fortin
– Arthur Fortin, Commented Aug 30, 2022 at 16:03

Konrad · Accepted Answer · 2022-08-30 16:12:54Z

1

Create a state like this:

const [checkedState, setCheckedState] = useState(new Array(numberOffices).fill().map(() => new Array(nbreViews).fill(false)));

Update the state like this:

const handleOnChange = (position, office) => {
  const updatedCheckedState = checkedState.map((off, id) => off.map((item, index) =>
    (id === office && index === position) ? !item : item
  ));
  // ...
  setCheckedState(updatedCheckedState);
}

answered Aug 30, 2022 at 16:12

Konrad

24.9k5 gold badges35 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Arthur Fortin Over a year ago

Thank you, it's better ! Now it send back a good selection. But handleOnChange doesn't update the checkedState, and juste the last checkbox of each office can be check, the others are checked by defaut and can't be unchecked

Arthur Fortin Over a year ago

Sorry I missed to update the handleChange call, so that works perfectly. You saved me hours of work. Thank you a lot !

Collectives™ on Stack Overflow

Checkbox trigger multiple select with React

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related