Q:

Why is react is not rerendering after setstate

In below code for react I am trying to change button colours by updating a dictionary. Unfortunately it is not working unless I force the rerender.
const jsonFromDatabase = [{ "id": 1, "name": "Ka" },
{ "id": 2, "name": "Erd" }];

const json = [{ "id": 2, "name": "Ka" },
{ "id": 3, "name": "Erd" }];
class ControllableButton extends React.Component {
  constructor() {
    super();
    this.state = {
      color_black: true,
      datasetForDisplay: json,
      datasetForStorage: jsonFromDatabase
    }
  }

  onClickGroupToUpdate = (cell, row, rowIndex) => {
    let toAdd = { "id": row.id, "name": row.name }
    this.setState((prevState, props) => {
      datasetForStorage: prevState.datasetForStorage.push(toAdd)
    })
    console.log("updated the database")
    console.log(this.state.datasetForStorage)
    // this.forceUpdate()
  }

  onClickGroupSelected = (cell, row, rowIndex) => {
  }

  // cellButton should be modified each time of click
  cellButton = (cell, row, enumObject, rowIndex) => {
    let theButton
    let inDB = false
    console.log(row)
    for (var group in this.state.datasetForStorage) {
      if (this.state.datasetForStorage[group].id == row.id) {
        inDB = true
      }
    }
    if (inDB) {
      theButton = <button style={{ backgroundColor: "blue" }}
        type="button"
        onClick={() => this.onClickGroupSelected(cell, row, rowIndex)}>
        In database
               </button>
      console.log('already in database' + row.id)
    } else {
      theButton = <button style={{ backgroundColor: "red" }}
        type="button"
        onClick={() => this.onClickGroupToUpdate(cell, row, rowIndex)}>
        Update database
               </button>
      console.log('not in  database' + row.id)
    }
    return theButton
  }

  render() {
    return (
      <BootstrapTable data={this.state.datasetForDisplay} >
        <TableHeaderColumn isKey dataField='id' width='100'>ID</TableHeaderColumn>
        <TableHeaderColumn dataField='name' width='300'>Group Name</TableHeaderColumn>
        <TableHeaderColumn dataField='button' width='100' dataFormat={this.cellButton}>Generate Group Page</TableHeaderColumn>
      </BootstrapTable>
    );
  }
}

ReactDOM.render(<ControllableButton />, document.getElementById('app'));

Above code is not re-rendering after each click on updating the group, unless I forceUpdate. Can you help me to figure out what am I doing wrong here?

A:

You are not using setState correctly and on top of that you are mutating it, which you shouldn't.  
Instead of this:
this.setState((prevState, props) => {
  datasetForStorage: prevState.datasetForStorage.push(toAdd)
})

You can just pass a plain object:  
this.setState({
  datasetForStorage: [...this.state.datasetForStorage,toAdd]
})

or pass the function like you did but note the () around the object so we actually return an object:
this.setState((prevState, props) => ({
  datasetForStorage: [...prevState.datasetForStorage,toAdd]
}))

Arrow functions are returning implicitly but won't return if you use the curly brackets
() => {}

so you have to wrap them with parentheses
() => ({})

I have used the spread syntax which help us create a new array easily.

