Reactjs listen for state changes in app component -

i'm relatively new react. i'm wanting listen state changes menu component have. need have state changes bubble the highest level in app, being app.jsx itself. have tried various methods in app listen events none of them have worked far. i'm not using redux in app it's menu i'm opening , closing. how can listen change throughout app?

an assistance appreciated.

!-- component function

export default class comp extends react.component {  constructor(props){     super(props);     this.toggledropdown = this.toggledropdown.bind(this);     this.state = {         isopen: false     }  }  toggledropdown = () => {     const toggledisopen = this.state.isopen ? false : true;      this.setstate({         isopen: toggledisopen     });  }  render = () =>     <button onclick={this.toggledropdown}>menu</button>  } 

!--- app

export default class app extends react.component {  constructor(props) {     super(props); }  componentdidupdate(prevprops, prevstate) {     console.log('//');     console.log(this.state); }  render = () =>     <span> value of state update here</span>    <comp/>   } 

you can callback:

export default class app extends react.component {  constructor(props) {     super(props); }  componentdidupdate(prevprops, prevstate) {     console.log('//');     console.log(this.state); } callback(value) {    console.log(value) // "testvalue" } render = () => //note: should have single component in return -> wrap within div, example     <span> value of state update here</span>    <comp cb={this.callback}/>   }   export default class comp extends react.component {  constructor(props){     super(props);     this.toggledropdown = this.toggledropdown.bind(this);     this.state = {         isopen: false     }  }  toggledropdown = () => {     const toggledisopen = this.state.isopen ? false : true;      this.setstate({         isopen: toggledisopen     });     this.props.cb("testvalue");  }  render = () =>     <button onclick={this.toggledropdown}>menu</button>  }