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