I am dealing with two components and one store.Components are Child and Parent,Store is store. Parent when rendering, make the child component up and parent listens to store.Now I want to update the state of variable in Store, by exposing a method from Store. The parent pass this method as a call back to child. Child has a dialog box, and if user closes/dismiss that dialog box, the clearStoreInfo() should be called, which is passed by parent to child. But when i do so, I get error

React cannot update during an existing state transition (such as within render ) functional component

Store looks as :

class Stores {
........
........
........
 @action.bound
    clearStoreInfo = () => {
        console.log(" clear info");
    }

}

Parent Component:

import Store ........
class InfoContainer extends React.Component {

 return (
            <div id={"info"} className={"container"}>
                <ButtonPanel store={Store} />
                
            </div>
}

const ButtonPanel = (props) => {
return (
.....
.....
<div>
            <ChildComponent clearStoreInfo={props.store.clearStoreInfo}/>
</div>
......
            }

class ChildComponent extends React.Component {

render(){
 const {clearStoreInfo} = this.props;

return (
////if -else ladder

clearStoreInfo();  // warning line.
<Dialog.......
onClose={clearStoreInfo}

/>
)
}

//Because of warning, the dialog box dont come. If i remove clearStoreInfo(), then dialog box works fine.

Is there any easy workaround given these components and store?

The wiring works fine, because I can see console log,based on if-else ladder, but its just the warning is messing things up internally.onClose is able to call the clearStoreInfo perfectally, but its when I manually call it, I am getting a warning.