CODEWITHSUNDEEP
reactjs
Pavel Eremin
Pavel Eremin

Reputation: 91

React component render Child component

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

Upvotes: 0

Views: 179

Answers (1)

Henrik Andersson
Henrik Andersson

Reputation: 47222

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 () {}

Upvotes: 1

Related Questions