I am trying to implement hooks version of this table, but I get some odd errors when I try to write the loop. It has something to do with the syntax and I cannot write a for loop inside my react app. How would I do this using forEach loop? I am posting my code snippets below. https://stackblitz.com/edit/antd-showhidecolumns
The errors I get are:
const onChange = (e) => {
let {checkedColumns} = colmenu
if (e.target.checked) {
checkedColumns = checkedColumns.filter((id) => {
return id !== e.target.id
})
} else if (!e.target.checked) {
checkedColumns.push(e.target.id)
}
let filtered = colmenu.initialColumns;
for(let i =0;i< checkedColumns.length; i++)
filtered = filtered.filter(el => {return el.dataIndex !== checkedColumns[i]})
setColmenu({columns: filtered, checkedColumns: checkedColumns})
}
other functions shown in the demo are working fine, It's just the filtering out the columns part I get errors.
These appear to be linting errors, your stackblitz example seems to work fine.
ESLint has a rule, no-plusplus that you can disable in a few ways. ex:
You can disable a rule for a whole file if you put this at the top of the file:
/* eslint-disable no-plusplus */
You can disable a rule for the line below this comment:
// eslint-disable-next-line no-plusplus
Or you can disable a rule inline:
for (let i = 0; i < xyz; i++) // eslint-disable-line no-plusplus
You can also disable rules project wide in your eslint configuration file.
It looks like the other linting error is object shorthand, feel free to read up here. You can take the same approach as above, or fix it to reflect your current linting settings.