React- Elegantly Toggle State Visibility - reactjs

Question

I'm currently trying to integrate my own column selector into the flask-bootstrap-table 3.0-beta2 package. I found an example on the github in the issues section which is as follows:
export default class ColumnHideTable extends React.Component {
constructor(props) {
super(props);
this.state = { showModal: false, hiddenColumns: {} };
}
changeColumn(id) {
return () => {
this.setState({ hiddenColumns: Object.assign(this.state.hiddenColumns, { id: !this.state.hiddenColumns.id }) });
};
}
}
However, this will only show/hide the ID column unsurprisingly and the checkboxes for the other values are stuck with checked values and when clicked, only check/uncheck and hide/show the id column
I'm trying to work out a solution using computed variables and I've cooked up the following:
setColumnState(column) {
let columns = Object.keys(cyhyData[0])
var o = {}
for(let i=0; i < columns.length;i++) {
if(column == columns[i]) {
Object.defineProperty(o, column, {
value: !this.state.hiddenColumns.column,
enumerable: true
})
break
}
}
return o
}
changeColumn(column) {
return () => {
this.setState({ hiddenColumns: Object.assign(this.state.hiddenColumns, this.setColumnState(column)) });
console.log(this.state.hiddenColumns)
};
}
This correctly hides the columns, but obviously wont un-hide them. How can I toggle !this.state.hiddenColumns.givenCol?
Is there perhaps a cleaner solution I'm not seeing?

Answer 1

I hacked together a solution for anyone who needs it. It's not elegant, but it works :) any suggestions to make this cleaner are welcome!
constructor(props) {
super(props);
this.state = { showModal: false, hiddenColumns: {} };
}
changeColumn(column) {
return () => {
var o = {}
if(!this.state.hiddenColumns.hasOwnProperty(column)) {
Object.defineProperty(o, column, {
value: true,
enumerable: true
});
this.setState({ hiddenColumns: Object.assign(this.state.hiddenColumns, o) });
} else {
this.setState({ hiddenColumns: Object.assign(!this.state.hiddenColumns, o) });
};
}
}
closeColumnDialog = (onClick) => {
this.setState({ showModal: false });
}
openColumnDialog = (onClick) => {
this.setState({ showModal: true });
}