Accepted answer

The best way I know how is to use the React.Children utility. Here's a quick Codepen to see the concept in action.

So the code in the render() function of the App component in your example would look something like this.

render: function() {

  var regButton = (this.state.loggedIn) ? null : (<Link className="Navigation__link" to="register">Register</Link>);
  var accountButton = (this.state.loggedIn) ? (<Link className="Navigation__link" to="account">My Account</Link>) : null;
  var childrenWithProps =, (Child, i) => {
    return React.cloneElement(Child, {
      loggedIn: this.state.loggedIn

  return (
      <nav className="Navigation">
          this.state.loggedIn ? 
          (<Link className="Navigation__link" to="/logout">Log out</Link>) :
          (<Link className="Navigation__link" to="/login">Sign in</Link>)  
        <Link className="Navigation__link" to="dashboard">Dashboard</Link>


I have the same problem before. This issue may help you.

However, this method for passing parameter is not recommend, especially when you are building a big app.

I recommend some state manager for js, such as "Redux".

Related Query

More Query from same tag