React component render Child component

Question

Some thing wrong with my code:

1 in this case header not displaying

import React from 'react';
import {Link} from 'react-router';

import CurrentUser from './../services/current-user.js';
import HeaderWithoutLogin from './header-without-login.js';
import HeaderWithLogin from './header-with-login.js';

let Header = React.createClass({
    render: () => {
        var Child = CurrentUser.isLoggedIn()
            ? HeaderWithLogin
            : HeaderWithoutLogin;
        return <div>{Child}</div>;
    }
});

export default Header;

2 in this case I got an error: "Cannot read property 'state' of undefined"

import React from 'react';
import {Link} from 'react-router';

import CurrentUser from './../services/current-user.js';
import HeaderWithoutLogin from './header-without-login.js';
import HeaderWithLogin from './header-with-login.js';

let Header = React.createClass({
    render: () => {
        if (CurrentUser.isLoggedIn()) {
            return <HeaderWithLogin/>;
        }
        return <HeaderWithoutLogin/>;
    }
});

export default Header;

How I need use my logic? I mean return and render different views regarding the statement

Can you elaborate on what is causing the state error, from what component the error stems and so on or post each components source code. — Henrik Andersson
– Henrik Andersson, Commented Sep 9, 2015 at 20:33
@limelights createRouter.js:275 => Uncaught TypeError: Cannot read property 'state' of undefined it becasue this is undefined in the HeaderWithLogin, but why? — Pavel Eremin
– Pavel Eremin, Commented Sep 9, 2015 at 21:03
jsfiddle.net/paveleremin/hzsnoh2h - Header.js jsfiddle.net/paveleremin/zpe8hfyy - HeaderWithLogin.js — Pavel Eremin
– Pavel Eremin, Commented Sep 9, 2015 at 21:24
It must be an error higher up in the hierarchy, can you post full stacktrace, please? — Henrik Andersson
– Henrik Andersson, Commented Sep 9, 2015 at 21:28

Henrik Andersson · Accepted Answer · 2015-09-09 21:57:39Z

1

Your render method within HeaderWithLogin is not correct.

render: () => {}

will try to bind this to something totally different from what you're expecting, which will produce undefined.

Change to this and it'll work.

render() {}

or ES5 equivalent

render: function () {}

edited Sep 9, 2015 at 21:57

answered Sep 9, 2015 at 20:32

Henrik Andersson

47.5k16 gold badges102 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pavel Eremin Over a year ago

can you help me with other more simple question: stackoverflow.com/questions/32490144/… ?

Collectives™ on Stack Overflow

React component render Child component

1 in this case header not displaying

2 in this case I got an error: "Cannot read property 'state' of undefined"

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 in this case header not displaying

2 in this case I got an error: "Cannot read property 'state' of undefined"

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related