Estoy mapeando a través de esta matriz
array=[ {'id': 1, 'isActive': true, 'name': apple}, {'id': 2, 'isActive': false, 'name': orange}, {'id': 3, 'isActive': false, 'name': forest} ]Tengo una entrada que se ve así después del mapa de matriz
<input id={item.id} type="checkbox" onClick={() => handleActive(item)} checked={item.isActiveMarket} />Quiero cambiar isActive dentro del elemento cuando hago clic en la casilla de verificación para activar o desactivar, pero la matriz debe permanecer llena sin eliminar ningún elemento
Para la función esto es lo que obtuve
const handleActive = (item) => { item.isActive = !item.isActive; };funciona pero solo cuando hago doble clic en él
Intenta usar onChange en lugar de onClick
Utilice el siguiente código:
<input id={item.id} type="checkbox" onChange={() => handleActive(item)} checked={item.isActiveMarket} />const initialState = [ {'id': 1, 'isActive': true, 'name': apple}, {'id': 2, 'isActive': false, 'name': orange}, {'id': 3, 'isActive': false, 'name': forest} ]; const [items, setItems] = useState(initialState); const onActiveToggle = (id) => { const item = items.find(item => item.id === id); setItems(prev => prev.splice(prev.indexOf(item), 1, {...item, isActive: !item.isActive})); } ... ... <> {items.map((item, index) => ( <input key={item.id} id={item.id} type="checkbox" onChange={() => handleActive(item.id)} checked={item.isActive} /> ))} </> ... ...