<p>J'ai plusieurs cases à cocher et lorsque je clique sur une case puis sur la suivante, la case précédente est décochée, savez-vous pourquoi ? </p> <p>Voici mon composant de case à cocher : </p> <pre class="brush:php;toolbar:false;">const Checkbox = ({ clé, identifiant, étiquette, vérifié, nom, onChange }:any) => retour ( <div className="checkbox-wrapper"> <input multiple key={id} id={id} type="checkbox" vérifié={checked} name={name} onChange={onChange} /> <label htmlFor={id}>{label}</label> </div> ) }</pré> <p>Voici à quoi ressemble le composant principal, les données sont présentes dans un tableau puis mappées, mais je ne sais pas pourquoi il décoche la case précédente, j'ai supprimé beaucoup d'autres codes JSX inutiles : ≪ /p> <pre class="brush:php;toolbar:false;">const checkboxList = [ { identifiant:0, étiquette : "majuscule", nom : "supérieur", vérifié : faux }, { identifiant : 1, étiquette : "minuscule", nom : "inférieur", vérifié : faux }, { identifiant : 2, étiquette : "numéro", nom : "numéro", vérifié : faux }, { identifiant : 3, étiquette : "symbole", nom : "symboles", vérifié : faux } ] const Générateur de mots de passe = () => const [données, setData] = useState (checkboxList) const handleChange = (id:numéro) => const updateCheckboxes = checkboxList.map((checkbox) => checkbox.id === id ? {...case à cocher, cochée : !checkbox.checked}:case à cocher) setData (mise à jour des cases à cocher) } retour ( <div className="elements"> {data.map((obj) => { retour( <clé div={obj.id}> <case à cocher multiple={vrai} identifiant={obj.id} étiquette = {obj.étiquette} vérifié= {obj.checked} nom= {obj.nom} onChange = {() => handleChange(obj.id)} /> </div> ) })} </div> ) }</pré> <p><br /></p>

const handleChange = (id:number) => {
  const updateCheckboxes = data.map((checkbox) => 
    checkbox.id === id ? {...checkbox, checked: !checkbox.checked}:checkbox)

  setData(updateCheckboxes)
}