In my list, when I click on row, the background of the changes color and the id of my row is added to the array of my state. It works, but when I do the reverse my array doesn’t get empty when I use the filter function (line 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;
Here is the screen when I click (the elements are in the table).
Note: the data is fictitious.
And here is the screen when I click again (the elements resent in the array).
And here is the screen when I click again (the elements resent in the array).
Why is the filter function not working?