If-else in React Stateless functional components

13
votes

I am basically refactoring my React component to support new stateless functional component React functional component. However, I'm confused about the if-else syntax in functional component.

Old code (Working fine): What it does basically is to find if the user is currently logged in. If yes, redirect to Home page else to Landing page. CurrentUser component returns a prop currentUser and checks the current state

import React, {Component} from "react";
import currentUser from "shared/components/CurrentUser";
import Home from "../Home";
import Landing from "../Landing";

class DefaultRouteHandler extends Component {

    render() {
        if (!this.props.currentUser) {
            return (<Landing />);
        } else {
            return (<Home />);
        }
    }
}

export default currentUser(DefaultRouteHandler);

New code: Now, how should I check the else condition in case the state of currentUser is false. As you can see right now it will always return the Home page.

import React from "react";
import currentUser from "shared/components/CurrentUser";
import Home from "../Home";
import Landing from "../Landing";

const DefaultRouteHandler = ({currentUser}) => (
    <Home />
);

export default DefaultRouteHandler;

Finally in my route.jsx I am calling the aforementioned component

<IndexRoute component={DefaultRouteHandler} />

Let me know if you need more information. I can also paste my CurrentUser component code. However, I don't think it will serve any purpose for this question.

4
javascriptreactjsreact-router
have you tried doing something like this !currentUser ? <Landing /> : <Home /> ? - oobgam
This is not a valid syntax when transpiling jsx using Babel - zaq
I tried it with the babeljs.io online repl, seems to be working. It transpiles to this code var DefaultRouteHandler = function DefaultRouteHandler(_ref) { var currentUser = _ref.currentUser; return !currentUser ? React.createElement(Landing, null) : React.createElement(Home, null); };, I used this const DefaultRouteHandler = ({currentUser}) => ( !currentUser ? <Landing /> : <Home /> ); - oobgam
Yep, sorry I didn't react the code properly. It is valid indeed, but it does not work and always returns <Landing /> - zaq
I think the problem is, you're not passing the currentUser props to the stateless function. On your old code, you have access to this.props but on the stateless function, you can only access what you input. - oobgam

4 Answers

8
votes
const DefaultRouteHandler = ({currentUser}) => {
  if (currentUser) {
    return <Home />;
  }
  return <Landing />;
};
7
votes

I finally figured out the problem. I have to make 2 changes in my new code:

1) Use ternary operator for if-else

2) Forgot to pass currentUser wrapper in export default in order to access the actual prop value

Following code works:

import React from "react";
import currentUser from "shared/components/CurrentUser";
import Home from "../Home";
import Landing from "../Landing";

const DefaultRouteHandler = ({currentUser}) => (
    !currentUser ? <Landing /> : <Home />
);

export default currentUser(DefaultRouteHandler);

thanks @Road for reminding me that I am not passing the prop from currentUser component.

5
votes

This is called Conditional-Rendering

1) Use simple if-else.

const DefaultRouteHandler = ({currentUser}) => {
    if (currentUser) {
      return <Home />;
    }
    return <Landing />;
};

2) Use JavaScript Ternary Operator

const DefaultRouteHandler = ({currentUser}) => (
    currentUser ? <Home /> : <Landing />
);
1
votes

use condition in stateless component for showing more than one imported component. Show condition wise header in your spa In App.js file

var path= window.location.pathname; // lets imaging that url is "/home/x"
         var pathArray = path.split( '/' );
         var loc= pathArray[1];//number of part of url that is changing, here it rerurns x
         
        injectTapEventPlugin();
        export default ({ children }) => (
            <MuiThemeProvider muiTheme={muiTheme}>
            <div className="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
            {loc!=="signin" && path!=="/"?(<DashboardHeader/>):null}
            {loc!=="signin" && path!=="/"?(<SideBar/>):null}
                {children}
              </div>
            </MuiThemeProvider>
    
        );