Rendering conditionally in React

react conditional render multiple elements
react: render conditionally from props
react conditional rendering best practices
react: use a ternary expression for conditional rendering
conditional rendering react functional component
react native if condition in render
conditional rendering react hooks
react nested conditional rendering

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.

Instead of

return (

    {comp}
);

try

return comp;

7 Ways to Implement Conditional Rendering in React Applications , This tutorial covers the most popular conditional rendering methods: If/else; Prevent rendering with null; Element variables; Ternary operator  Let's look at one of the most common cases: conditionally rendering a React element based on whether a specific prop exists or not. In this example, we'll render a Card component that takes a title prop and optionally a subtitle prop. We only want to render a h2 for the subtitle if it exists. For simple conditional

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'));

8 conditional rendering methods in React, In a conditional render, a React component decides based on one or several conditions which DOM elements it will return. For instance, based  Conditional rendering in React using an IIFE. IIFE stands for Immediately Invoked Function Expression, which is a pattern that lets you declare a function as an expression and execute it immediately after its declaration. As we saw before, expressions can be freely combined with JSX code, and IIFEs are not exception. The expression value will be the one returned by the function.

{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

React Conditional Rendering, You use an IF with your condition and return the element to be rendered. Observe the example below: const UserList = ({ isLoading, results }) => {  Conditional Rendering We can conditionally render items in React components by using regular if or switch statements, or we can use the ternary operator for conditionals that have two cases.

Conditional Rendering in React, This is what we call Conditional Rendering in ReactJS. That is to create multiple components and render them based on some conditions. This is also a kind of  In the last article we discussed how to conditionally render parts of our React application using if/ else statements. You can find more about it in the link below:

ReactJS, When it comes to conditional rendering with React, you have a lot of This will render the children of the component, only if the condition is met  Problem Statement React element not loading on conditional rendering What I have done till now I have a simple condition and I want to render components based on that.

How to Show Components Conditionally in React, We cover below the most useful methods for conditional rendering in react: if/else​; Ternary operation; Inline IF with Logical && operator; Switch case operator  Conditional rendering in React works the same way conditions work in JavaScript. Use JavaScript operators like if, and let React update the UI to match them. We use an if with our condition and

Comments
  • comp itself is a react child, simply return that.