There are probably many questions that might cover this error, but I've looked for quite some time and can't seem to find an answer that fits this problem There seems to be an infinite loop being created as I pass one prop from class to another. I've made sure that the buttons are bound and only activate once but this didnt seem to help.

NAVBAR CLASS:

```
class Navbar extends React.Component {
constructor(props) {
    super(props)
    this.state = ({
        page: "Home",

    });
    this.Home = this.Home.bind(this);
}
 Home = (row) => {
        switch(row ){
        case "Home":
            this.setState({page: "Home"}) 
            break;
        case "Schedule":
            this.setState({page: "Schedule"}) 
            break;
        case "Experts":
            this.setState({page: "Experts"}) 
            break;
        case "Hotel":
            this.setState({page: "Hotel"}) 
            break;
        case "Register":
            this.setState({page: "Register"}) 
            break;
        case "Reviews":
            this.setState({page: "Reviews"}) 
            break;
        default: 
            this.setState({page: "Home"}) 
            break;
        }
    }

render() {

    function HamMenu(e)
        {
            e.preventDefault();
            menuToggle = 'btn active';
        }
    let menuToggle = 'btn not-active';
    console.log("state: " + this.state.page);
    return(
        <div>
        <nav className="navbar fixed-top navbar-default navbar-light bg-light">
            <div className="container">
                <img className="navbar-logo" src="https://southbankresearch.com/wp-content/uploads/sites/9/2019/08/stickyLogo-min.png" width="200px"/>
                <ul className="nav navbar-nav">
                    <li><a href="#" onClick={() => this.Home("Home")}>WHY ATTEND?</a>
                    </li>
                    <li><a href="#" onClick={() => this.Home("Schedule")} >SCHEDULE</a>
                    </li>
                    <li><a href="#" onClick={() => this.Home("Experts")}>EXPERTS</a>
                    </li>
                    <li><a href="#" onClick={() => this.Home("Hotel")}>HOTEL</a>
                    </li>
                    <li><a href="#" onClick={() => this.Home("Register")}>REGISTER</a>
                    </li>
                    <li><a href="#" onClick={() => this.Home("Reviews")}>REVIEWS</a>
                    </li>
                </ul>

                 <div className="box">
                    <div onClick={HamMenu} className={menuToggle}>
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>

            </div>
        </nav>
        <Body page={this.state.page}/>
        </div>
    );
}

```

}

BODY CLASS:

```
class Body extends React.Component {
constructor(props)
{
    super(props);
    this.state = ({
        currentPage: "",

    });
}
componentDidUpdate() {
    let page = this.props.page;
    switch(page ){
        case "Home":
            this.setState({currentPage: <Home/>}) 
            break;
        case "Schedule":
            this.setState({currentPage: <Schedule/>}) 
            break;
        case "Experts":
            this.setState({currentPage: "Experts"}) 
            break;
        case "Hotel":
            this.setState({currentPage: "Hotel"}) 
            break;
        case "Register":
            this.setState({currentPage: "Register"}) 
            break;
        case "Reviews":
            this.setState({currentPage: "Reviews"}) 
            break;
        default: 
            this.setState({currentPage: "Home"}) 
        }
}

render() {
    console.log(this.props.page)
    return(
        <div>
            {this.state.currentPage}
        </div>
        );
    }
}

```

ERROR MESSAGE:

[![enter image description here](https://i.stack.imgur.com/6QJIL.png)](https://i.stack.imgur.com/6QJIL.png)

Thank you for your time, and again I apologise if this question has been answered before in an old thread. Cheers