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.
const DefaultRouteHandler = ({currentUser}) => {
  if (currentUser) {
    return <Home />;
  }
  return <Landing />;
};
                        If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With