Tengo dos funciones simples para agregar y eliminar elementos de la matriz
La función isInComparator () debe verificar si el elemento basado en la identificación leída del valor de la casilla de verificación está en la matriz o no y necesito cambiar el título de la casilla de verificación a "eliminar" o "agregar"
Funciona con este código, pero cuando elimino setLabelValue(value); fila, deja de funcionar y no entiendo por qué, porque ahora ni lo estoy usando
export const ProductItemBox = ({ product, }: ProductProps): JSX.Element => { const [labelValue, setLabelValue] = useState(""); let idsToCompare: string[] = [] || ""; let productId: string; let isChecked = false; let value = ""; const handleComparator = (productId: string) => { if (idsToCompare.includes(productId)) { idsToCompare = idsToCompare.filter((e) => e !== productId); } else { idsToCompare.push(productId); } setLabelValue(value); }; const isInComparator = (productId: string) => { if (idsToCompare.includes(productId)) { value = "remove"; isChecked = true; } else { value = "add"; isChecked = false; } return isChecked; }; <li key={product.productId}> <div className="comparator-form"> <input type="checkbox" id={product.productId} value={product.productId} defaultChecked={isInComparator(product.productId)} onChange={() => handleComparator(product.productId)} /> <label htmlFor={product.productId}>{value}</label> </div> </li> ); };Esto sucede porque la configuración del estado hace que se vuelva a procesar el componente y, cuando no lo configura, el componente no se vuelve a procesar. Debe hacer que idsToCompare sea una variable de estado y configurarla con setState, no solo empujar a la matriz
Puedes aprender todo lo que necesitas saber sobre el estado aquí
Como @Marat dijo anteriormente, solo le brindo la misma solución pero en detalles.
export const ProductItemBox = ({ product, }: ProductProps): JSX.Element => { const [labelValue, setLabelValue] = useState(""); // as you can use useState hook with typeScript rules const [idsToCompare,setIdsToCompare ]= useState<string[]>([]); // let idsToCompare: string[] = [] || ""; let productId: string; let isChecked = false; let value = ""; const handleComparator = (productId: string) => { if (idsToCompare.includes(productId)) { idsToCompare = idsToCompare.filter((e) => e !== productId); } else { // set the idsToCompare setIdsToCompare(oldArray => [...oldArray, productId]); // idsToCompare.push(productId); } // setLabelValue(value); }; const isInComparator = (productId: string) => { if (idsToCompare.includes(productId)) { value = "remove"; isChecked = true; } else { value = "add"; isChecked = false; } return isChecked; }; <li key={product.productId}> <div className="comparator-form"> <input type="checkbox" id={product.productId} value={product.productId} defaultChecked={isInComparator(product.productId)} onChange={() => handleComparator(product.productId)} /> <label htmlFor={product.productId}>{value}</label> </div> </li> ); };Déjame saber si esto resuelve el problema.