Quiero hacer que una casilla de verificación controlable que se haya marcado se vuelva verdadera si la identificación de la publicación es la misma que la identificación de otra matriz, pero no entiendo cómo hacerlo. Cuando hace clic en la casilla de verificación, la identificación de la publicación se agrega a la matriz de marcadores, por lo que quiero que sea controlable
La matriz con la identificación que obtengo de la tienda redux:
const bookmarksData = useSelector((state) => state.bookmark.bookmarksData);la matriz se ve así:
[ { "id": 5 }, { "id": 2 }, { "id": 19 }, { "id": 22 }, { "id": 23 }, { "id": 21 } ]Las publicaciones que muestro con el mapa y en el ciclo traté de agregar una función de filtro a la marcada, que buscaría una identificación coincidente y, si lo son, la pondría en verdadero, pero después de esta función, todo lo marcado se convirtió en verdadero. Realmente no entiendo cuál es el problema, por qué todas las publicaciones se verificaron como verdaderas
//code outside the loop const setChecked = (idS) => { bookmarksData.filter((e) => e.id === idS) ? true : false } //the code in the loop where I display the posts <Checkbox icon={<BookmarkBorderIcon />} checkedIcon={<BookmarkIcon />} checked={() => setChecked(id)} onClick={() => savedBokmark({ id })} />ingrese la descripción de la imagen aquí
¿Puede decirme cuál es el problema y cómo hacer que la casilla de verificación funcione correctamente con el filtrado?
Debe establecer el valor booleano directamente.
checked={setChecked(id)}también en la función setChecked puedes hacer la siguiente modificación. de lo contrario, cuando no hay elementos coincidentes, devuelve una matriz vacía que seguirá siendo verdadera.
const setChecked = (idS) => Boolean(bookmarksData.find((e) => e.id === idS));el accesorio marcado en el componente Checkbox espera un valor booleano, por lo que puede hacerlo así
//el código en el ciclo donde muestro las publicaciones
<Checkbox icon={<BookmarkBorderIcon />} checkedIcon={<BookmarkIcon />} checked={setChecked(id)} onClick={() => savedBokmark({ id })} />