Tengo una lista de casillas de verificación y cuando se selecciona una, quiero que se agregue la ID asociada a un objeto de estado y cuando no está marcada, la ID debe eliminarse del objeto de estado.

Actualmente, el objeto de estado solo se actualiza cuando se selecciona una segunda casilla de verificación (y el estado solo contiene la primera casilla de verificación), es decir, siempre tiene una casilla de verificación detrás. Entonces es lo contrario cuando se desmarca: si se marcan 3 casillas, el estado muestra 4 casillas seleccionadas.

Soy un desarrollador súper nuevo, así que estoy seguro de que esto es increíblemente simple, cualquier ayuda sería muy apreciada :)

 const [checkedState, setCheckedState] = useState(new Array(20).fill(false)); const [checkedPlaylists, setCheckedPlaylists] = useState({}); const handleChange = (position, id) => { const updatedCheckedState = checkedState.map((item, index) => index === position ? !item : item ); setCheckedState(updatedCheckedState); if (checkedState[position] === false) { setCheckedPlaylists(prev => { return { ...prev, [position]: id } }) } else { setCheckedPlaylists(prev => { delete checkedPlaylists[position] return { ...prev } }) } }

Aquí está el jsx

 return ( <> <h3>Select Playlists</h3> <form onSubmit={handleSubmit}> <ul className='playlists-list' style={{"listStyle": "none"}}> {playlists?.items.map((playlist, index) => { return ( <li key={index}> <div className='playlists-list-item'> <input type='checkbox' id={`custom-checkbox-${index}`} name={playlist.name} value={playlist.name} checked={checkedState[index]} onChange={() => handleChange(index, playlist.id)} /> <label htmlFor={`custom-checkbox-${index}`}>{playlist.name}</label> </div> </li> ) })} </ul> <div> <button className='submit-btn' type='submit'>Submit</button> </div> </form> <TopSongs playlists={playlists} /> </>

)