Dynamically setting show property of react-table does not show or hide columns viceversa

Question

I am using react-table for the data-grid purpose. I am implementing a settings icon which shows the list of columns and based on the selection, the column gets shown or hidden. I am manipulating "show" property of columns object for this. While the property is getting set properly, there is no such change in the table. Can someone help me with this.

But when I set the property directly(in App component) it works. Where am I going wrong?

Code Sandbox: https://codesandbox.io/s/blue-cherry-di3ub

Help would be appreciated

Answer 1

The issue is in your Select

this.props.handleSetState(this.props.data)

this.props.data is immutable, so you're just sending back the same data that came in. Stream props.data into a new object and then send that back to the parent.

ETA: Something like this...

    let updatedObj = this.props.data.map((obj, i) => {
      if (obj.accessor === value[i]) {
        obj.show = false
      }
      return obj
    })
    this.props.handleSetState(updatedObj);