Reactjs - Rendering login component

Question

I am following this tutorial on react routing. I managed to connect it to my data store, and it works fine.

What bothers me is the landing page. The way I have set it up (Fiddle) it when the user goes to root page, link to login is displayed. When the user clicks that login the login form component is shown.

I would like to avoid clicking on the loginlink. When the user navigates to root page, if he is not logged in automatically display the Login component.

This Fiddle shows my futile attempt to make it work. Previous code that works:

render() {
return (
  <div>
    <ul>
      <li>
        {this.state.loggedIn ? (
          <Link to="/logout">Log out</Link>
        ) : (
          <Link to="/login">Sign in</Link>
        )}
      </li>
      <li><Link to="/about">About</Link></li>
      <li><Link to="/dashboard">Dashboard</Link> (authenticated)</li>
    </ul>
    {this.props.children || <p>You are {!this.state.loggedIn && 'not'} logged in.</p>}
  </div>
)
}

And this is my attempt:

 render() {
return (
   <Login data={this.state} />
)
}

This actually render the login component, but produces this error:

Uncaught TypeError: Cannot read property 'state' of undefined

It seems it is disconnected.

I am breaking my head over this for some time now, any help is appreciated

Answer 1

Variables passed to children the way you do with data={something} are called props .

You can access to data from within <Login /> component with this.props.data

I highly suggest you to read this : https://github.com/uberVU/react-guide/blob/master/props-vs-state.md

Answer 2

Looking at your fiddle, i think this is wat you want to do.

    function requireAuth(nextState, replace) {

  if (!auth.loggedIn()) {
    replace({
      pathname: '/login',
      state: { nextPathname: nextState.location.pathname }
    })
  }
}

  render((
      <Router history={browserHistory}>
          <Route path="/" component={App} onEnter={requireAuth} />
          <Route path="/login" component={Login} />
          <Route path="/logout" component={Logout} />
          <Route path="/about" component={About} />
          <Route path="/dashboard" component={Dashboard} />
      </Router>
  ), document.getElementById('example'));

btw i removed the nesting from your routes i didnt think they where necessary within your setup, but if you do readd them i saw this peace of code in your fiddle, so actually the only thing you need to do is onEnter=requireAuth on app, if your not logged in you will be going to login, if you are you will be going to your app,

so in our render you can do whatever u want

const App = React.createClass({
  render() {
    return (
      <div> You are logged in </div>
    )
  }
});

a sidenote: the only thing u are doing here is passing your state object to a child component

return (
   <Login data={this.state} />
)

meaning:

within Login, the property this.props.data <-- now has the same values as this.state in the parent component of Login