CODEWITHSUNDEEP
javascriptreactjs
Darren
Darren

Reputation: 2290

Nothing was returned from render in React Component

In the App index.js file I am handling redirects as navigate based on user authentication. 

const IndexAuth = () => navigate(routes.DASHBOARD);

const IndexPageContent = withAuthorization(authCondition)(() => (
 <AuthUserContext.Consumer>
    {authUser => (authUser ? <IndexAuth /> : null)}
  </AuthUserContext.Consumer>
));

export default withAuthentication(IndexPage);

The redirect works but I am getting an error at IndexAuth and causing the page at routes.DASHBOARD to not render.

IndexAuth(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

As I understand it, I need to return something for the component to render. How can I do this?

Upvotes: 3

Views: 214

Answers (2)

Darren
Darren

Reputation: 2290

Just to extend on Joseph Sible's answer with a solution for others in the same boat.

I fixed the issue by returning null in IndexAuth

const IndexAuth = () => {
  navigate(routes.DASHBOARD);
  return null;
};

Upvotes: 0

Joseph Sible-Reinstate Monica
Joseph Sible-Reinstate Monica

Reputation: 48572

If IndexAuth is just a wrapper around navigate, then navigate needs to return something, which it doesn't. If navigate is your function, then add a return value to it. Otherwise, add it to IndexAuth.

Upvotes: 1

Related Questions