If-else in React Stateless functional components
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.
const DefaultRouteHandler = ({currentUser}) => {
if (currentUser) {
return <Home />;
}
return <Landing />;
};