En mi lista, cuando hago clic en la fila, el fondo cambia de color y la identificación de mi fila se agrega a la matriz de mi estado. Funciona, pero cuando hago lo contrario, mi matriz no se vacía cuando uso la función de filtro (línea 15).
import React, {useState} from 'react'; import './Liste.css'; import Button from '../Button/Button'; function Liste(props) { const [nbLine, setNbLine] = useState([]); const clickLine = (e) => { if (e.target.parentNode.className.length > 0) { console.log(e.target.parentNode.id); e.target.parentNode.classList.remove("lineClicked"); nbLine.filter(line => line != e.target.parentNode.id); console.log(nbLine); } else { e.target.parentNode.classList.add("lineClicked"); nbLine.push(e.target.parentNode.id); console.log(nbLine); } } const doubleClickLine = () => { console.log("doubleClickLine"); } return ( <> <table className='tableList'> <thead> <tr> {props.headers.map((header, h) => <th key={h}>{header}</th> )} </tr> </thead> <tbody> {props.records.map((record, r) => <tr key={r} id={props.table+"_"+record[0]} onClick={clickLine} onDoubleClick={doubleClickLine}> {props.columns.map((column, c) => <td key={c}>{record[column]}</td> )} </tr> )} </tbody> <tfoot> <tr> <th colSpan={7}> {props.buttons.map((button, b) => <Button key={b} id={button[0]} type={button[1]} value={button[2]} click={button[3]}/> )} </th> </tr> </tfoot> </table> </> ) } export default Liste;Y aquí está la pantalla cuando vuelvo a hacer clic (los elementos se reenvían en la matriz).
Y aquí está la pantalla cuando vuelvo a hacer clic (los elementos se reenvían en la matriz).
¿Por qué no funciona la función de filtro?
Me desbloqueé.
Reemplazando la matriz de estado con un objeto.
const [nbLines, setNbLines] = useState({});
Mediante el uso del operador de eliminación en lugar del método de filtro.
delete nbLines[e.target.parentNode.id];
Y asignando un valor a una tecla en lugar del método push.
nbLines[e.target.parentNode.id] = e.target.parentNode.id;
