CODEWITHSUNDEEP
javascriptarraysreactjsecmascript-6antd
WildThing
WildThing

Reputation: 1275

JS Array: Filtering out columns in a table

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:

  1. Unary operator '++' used
  2. Expected property shorthand
    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.

Upvotes: 0

Views: 211

Answers (1)

Tom Foster
Tom Foster

Reputation: 462

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.

Upvotes: 1

Related Questions