Make the inputs of type checkbox come marked by the API and change their state at the time of their-CodePudding

Hello dev I hope you are well. I would like the checkboxes to be checked by the API and change their status at the time of their interaction, the truth is that I have tried several things but I did not reach the solution

-Status of roles brought from the API that should be marked.

roles: [
    {
        "id": 3,
        "name": "Firmante"
    },
    {
        "id": 4,
        "name": "Trabajador"
    }
]

-All roles also brought from the API

const[allRoles, setAllRoles] = [
    {
      "id": 2,
      "name": "Administrador"
    },
    {
      "id": 3,
      "name": "Firmante"
    },
    {
      "id": 4,
      "name": "Trabajador"
    },
    {
      "id": 5,
      "name": "Gestión de Usuarios"
    },
    {
      "id": 6,
      "name": "Admin Workflow"
    },
    {
      "id": 7,
      "name": "Representante Legal"
    },
    {
      "id": 8,
      "name": "Seguimiento de Notificaciones"
    }
  ]

-"roles" painted so far

<dt>
          <label className="mb-2">Roles</label>
            {allRoles.map(role =>{
              return (
                <div>
                  <label className="new-control new-checkbox checkbox-primary">
                    <input
                      name={role.id}
                      type="checkbox"
                      name="features"
                      class="new-control-input"
                      onChange={onChangeChecked}
                    />
                    <span class="ml-2 new-control-indicator">{role.name}</span>
                  </label>
                </div>
              )
            })}
        </dt>

-UI Image

Thank you very much in advance...

CodePudding user response：

You need to set the checked property of the checkbox

Also you've defined name twice

<input
 name={role.id}
 type="checkbox"
 class="new-control-input"
 onChange={onChangeChecked}
 checked="checked"
/>

CodePudding user response：

You need to use checked to set the condition for when the checkbox is checked but also value to make sure the correct value is passed when the onChange event is fired. Sample implementation - https://codesandbox.io/s/focused-dream-yv7kj?file=/src/App.js

CodePudding user response：

use useEffect to mark the checkboxes coming from the api.
create an array to hold all the ids of the checked ones.

in the input use checked property to identify if the id is exists in the checked array or not.

const [allRoles, setAllRoles] = useState([
  {
    id: 2,
    name: "Administrador"
  },
  {
    id: 3,
    name: "Firmante"
  },
  {
    id: 4,
    name: "Trabajador"
  },
  {
    id: 5,
    name: "Gestión de Usuarios"
  },
  {
    id: 6,
    name: "Admin Workflow"
  },
  {
    id: 7,
    name: "Representante Legal"
  },
  {
    id: 8,
    name: "Seguimiento de Notificaciones"
  }
]);

const [checkedRoles] = useState([
  {
    id: 3,
    name: "Firmante"
  },
  {
    id: 4,
    name: "Trabajador"
  }
]);

const [acceptedRoles, setAcceptedRoles] = useState([]);

useEffect(() => {
  const rolesIds = checkedRoles.map((r) => r.id.toString());
  setAcceptedRoles(rolesIds);
}, [checkedRoles]);

const onChangeChecked = (e) => {
  let newCheckedRoles = [];

  const isExist = checkedRoles.filter(
    (r) => r.id.toString() === e.target.id
  );

  if(isExist && isExist.length > 0) {
     newCheckedRoles = checkedRoles.filter(
       (r) => r.id.toString() !== e.target.id
     );
   }else {
      newCheckedRoles = [...checkedRoles, {
        id: e.target.id,
        name: e.target.name
      }]
   }

  setCheckedRoles(newCheckedRoles);
};

return (
  <div className="App">
    <dt>
      <label className="mb-2">Roles</label>
      {allRoles.map(({ name, id }, i) => {
        return (
          <div key={i}>
            <label className="new-control new-checkbox checkbox-primary">
              <input
                id={id}
                type="checkbox"
                name="features"
                className="new-control-input"
                onChange={onChangeChecked}
                checked={acceptedRoles.includes(id.toString())}
              />
              <span className="ml-2 new-control-indicator">{name}</span>
            </label>
          </div>
        );
      })}
    </dt>
  </div>
);

working sample demo - codesandbox.io/s/stupefied-wozniak-4ye6l