score:2

Accepted answer

It looks like you're missing a check for changed props in your componentDidUpdate. Try adding it:

componentDidUpdate(prevProps) {
  let page = this.props.page;
  if (prevProps.page !== 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"
        })
    }
  }
}

Also to keep your method more DRY, you can call this.setState only once:

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

score:0

You may call setState() immediately in componentDidUpdate() but note that it must be wrapped in a condition, or you’ll cause an infinite loop. So the solution of that is wrapping that part in a condition or using React-Router library for react routing as follows.

<ul className="nav navbar-nav">
   <li><Link to="/Home">WHY ATTEND?</li>
   <li><Link to="/Scheudle">SCHEDULE</li>
</ul>

ReactDOM.render(
  <Router history={browserHistory}>  
    <Route path="/Home" component={Home} />
    <Route path="/Schedule" component={Schudule} />
  </Router>,
  document.getElementById('root')
);

Related Query

More Query from same tag