Trying to get the button state from NavBar into iFramePage but it will always render as the variable as null.

// NavBar.js

class ButtonExample extends React.Component {
    state = { status: false }
    render() {
      const { status } = this.state;
      return (
        <button id="button1" value={status} onClick={() => this.setState({ status: !status })}>
          {`${status ? 'dark' : 'light'}`}
        </button>
      );
    }
  }

const NavBar = (props) => (
    <AppBar {...props} >
        <ButtonExample/>
    </AppBar>       
);
export default NavBar;

// iFramePage.js
let mode,
    element = document.getElementById("button1");
if (element != null) {
    mode = element.innerText;
}
else {
    mode = null;
}

const path = ("http://127.0.0.1/kiosk&theme=")

const iFramePage = () => (
    <div>
    <iframe src={ path + mode } /> 
);

export default iFramePage;

If i put a button function on iFramepage to console log the value from NavBar it will return the value correctly. So i would presume its down to timing of the rendering of the page?

function  GetMode () {
  let str,
    element = document.getElementById("button1");
if (element != null) {
    mode = element.innerText;
}
else {
    mode = null;
}
  console.log(mode)
}
...
<button label="GetMode" onClick={() => { GetMode();}} /> 
...