ag-grid react cellRendererFramework doesn't re render when state changed

user_9159987 0
Viewed 5823

I'm displaying data in ag-grid-react and grid has come conditional cell rendering based on state. Here is my code. This is working on first run and displaying "YEAH" button. when i clicked button i want to change with NOOO button

This is state

this.changebutton = this.changebutton.bind(this);
this.state= {
   isyes = "yes"
}

This is ag-grid-cell-renderer 

cellRendererFramework: (params) => {
  return <div>
   {
     this.state.isyes === "yes" ? 
<button onClick= {() => this.changebutton()}>YEAH</button> 
: 
<button onClick= {() => this.changebutton()}>NOOOO</button>
 }

</div>

}

this is state changer

changebutton() {
     this.setState({isyes: "no" })
      console.log(this.state.isyes)
}

I seeing state is changing properly, But doesn't see any change of button. why?

ag-grid reactjs
1 Answers

Your code seems incomplete to check your situation. First thing that comes in mind is the expression is evaluated once (maybe, as it appears as a method of an object not directly in render function) and is never retriggered.

Also notiche that setState() is async so you should not:

this.setState({isyes: "no" });
console.log(this.state.isyes);

instead you should:

this.setState(
    {isyes: "no" },
    () => console.log(this.state.isyes);
);

Try with:

api.refreshCells()

ref: ag-grid.com/javascript-grid-cell-rendering-components

user_12340870
Related