Rendering conditionally in React

Question

I want to render two completely separate components based on whether the user is logged in or not. This is my code,

import React, {Component} from 'react';
import ContainerLogged from './components/logged/ContainerLogged'
import ContainerUnlogged from './components/unlogged/ContainerUnlogged'

class App extends Component {
    constructor(props){
        super(props)
        this.state = {isLoggedIn : false}
    }
    render(){
        const comp = this.state.isLoggedIn ? (
            <ContainerLogged />
        ): (
            <ContainerUnlogged />
        );
        return (

            {comp}
        );
    }
}
export default App;

This is my index.js

import 'normalize.css';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

I get the following error,

Objects are not valid as a React child (found: object with keys {comp}). If you meant to render a collection of children, use an array instead.
    in App (at index.js:8)

I'm new to React and thus dont understand what's going on over here.

comp itself is a react child, simply return that.

AjayK
– AjayK

2018-05-12 21:21:51 +00:00
Commented May 12, 2018 at 21:21 — AjayK
– AjayK, Commented May 12, 2018 at 21:21

rnli · Accepted Answer · 2018-05-12 21:15:45Z

2

Instead of

return (

    {comp}
);

try

return comp;

answered May 12, 2018 at 21:15

rnli

5758 silver badges17 bronze badges

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

Comments

AjayK · Accepted Answer · 2018-05-12 21:20:43Z

You are in right direction, I would suggest to break your render function, it always helps when you have conditional logic.

import React, { Component } from 'react';
import { render } from 'react-dom';

class App extends Component {
  constructor() {
    super();
    this.state = {
      isLoggedIn: false
    };
  }

  renderLoggedIn = () => {
    return (
      <div>
        <h2>Logged In</h2>
      </div>
    );
  }
  renderNotLoggedIn = () => {
    return (
      <div>
        <h2>Not Logged In</h2>
      </div>
    );
  }
  render() {
    let element = null;
    if (this.state.isLoggedIn) {
      element = this.renderLoggedIn();
    } else {
      element = this.renderNotLoggedIn();
    }
    return element;
  }
}

render(<App />, document.getElementById('root'));

Maxime Chéramy · Accepted Answer · 2018-05-12 21:30:56Z

1

{comp} is an object with key comp and value the value of the variable comp. That does make much sense here. (That's ES2015 "Shorthand property names" feature)

You must simply return comp instead of an object: return comp

edited May 12, 2018 at 21:30

answered May 12, 2018 at 21:20

Maxime Chéramy

19k10 gold badges58 silver badges77 bronze badges

Collectives™ on Stack Overflow

Rendering conditionally in React

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related