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, Sep 09 '15 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, Sep 09 '15 at 21:03
http://jsfiddle.net/paveleremin/hzsnoh2h/ - Header.js http://jsfiddle.net/paveleremin/zpe8hfyy/ - HeaderWithLogin.js — Pavel Eremin, Sep 09 '15 at 21:24
It must be an error higher up in the hierarchy, can you post full stacktrace, please? — Henrik Andersson, Sep 09 '15 at 21:28
@limelights sure, can you open https://jsbin.com/pedepa/edit?html,js,console,output in Chrome please? And you will see the error — Pavel Eremin, Sep 09 '15 at 21:47
@limelights I solved the problem, it was an issue with ES6. I user: render: () => {} instead of render() {} — Pavel Eremin, Sep 09 '15 at 22:28

Henrik Andersson · Accepted Answer · 2015-09-09T21:57:39.740

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 09 '15 at 21:57

answered Sep 09 '15 at 20:32

Henrik Andersson

45,354
16
98
92

can you help me with other more simple question: http://stackoverflow.com/questions/32490144/react-extends-class-using-es5 ? – Pavel Eremin Sep 09 '15 at 22:30

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 Answers1