0
117
Vistasreaccionar actualizar matriz de objeto con campo marcado en estado
const data = [ { id: "1", checked: false, }, { id: "2", checked: false, }, { id: "3", checked: false, }, { id: "4", checked: false, }, ]; const [state, setState] = useState(data) {state.map((item, index) => ( <div key={index}> <input checked={item.checked} type="checkbox" /> <span>{item}</span> </div> ))}¿Cómo podría actualizar lo marcado cada vez que las casillas de verificación están marcadas y desmarcadas?
Algunos ejemplos, pero me gustaría que los items checked are fueran una matriz como [{id: "1", marcado: verdadero,}, {id: "2", marcado: verdadero,}];
·
Juan Pablo Isaza
3 Respuestas
Responde la pregunta0
Puede agregar onClick a la input y actualizar sus datos de estado en función del elemento seleccionado.
const handleChange = (id) => { const clonedData = [...state]; setState( clonedData.map((d) => (d.id === id ? { ...d, checked: !d.checked } : d)) ); }; //// Your remaining code <input checked={item.checked} type="checkbox" onClick={() => handleChange(item.id)} />;Se adjunta una caja de arena para referencia.
·
Juan Pablo Isaza
Denunciar
0
Dados los data que nos proporcionó como el state , puede crear una copia del estado y alternar el que ha activado para verificar.
const [state, setState] = useState(data) const handleChange = (id) = { const newState = state.map(item => item.id === id? {...item, state: !item.checked} : item) setState(newState) } {state.map((item, index) => ( <div key={index}> <input checked={item.checked} type="checkbox" onChange={(e) => handleChange(item.id)}/> <span>{item}</span> </div> ))}
·
Juan Pablo Isaza
Denunciar
0
Puede crear una nueva función y, al cambiar, actualizar el estado anterior
export default function App() { const data = [ { id: '1', checked: false, }, { id: '2', checked: false, }, { id: '3', checked: false, }, { id: '4', checked: false, }, ]; const [state, setState] = React.useState(data); function updateState(id) { const newVal = state.map((item) => { if (item.id === id) { return { ...item, checked: !item.checked, }; } else { return { ...item, }; } }); setState(newVal); } return ( <div> {state.map((item, index) => ( <div key={index}> <input checked={item.checked} type="checkbox" onChange={() => updateState(item.id)} /> <span>{item.id}</span> </div> ))} </div> ); }
·
Juan Pablo Isaza
Denunciar
Responde la pregunta