Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

If-else in React Stateless functional components

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.

like image 621
zaq Avatar asked Dec 02 '15 14:12

zaq


1 Answers

const DefaultRouteHandler = ({currentUser}) => {
  if (currentUser) {
    return <Home />;
  }
  return <Landing />;
};
like image 126
jurassix Avatar answered Sep 24 '22 01:09

jurassix