Cannot destructure property of null

Question

I have a component that destructures user from its auth prop:

 const Profile = ({
     auth: {user}
 }) => {...}

The problem is that when I am developing, Nodemon keeps refreshing my page whenever I save any changes. When the component tries to mount, it throws an error that it can't destructure user from auth because auth is null at that point (until I navigate the site and re-login).

Is there an elegant way of handling this? I took a look at this article, but I can't do something like const { user } = auth || {}. Well.. I mean, I can, but I want to destructure from the props, not do const { user } = auth || {} in the function body.

Default arguments only apply to values that are `undefined`. `null` will not allow the default argument to be applied, so using short-circuiting in the body is the only way to do this. — Patrick Roberts, Jul 10 '19 at 14:12
@PatrickRoberts destructuring parameters is completely unrelated to React, though common with parameters of a function component. — Emile Bergeron, Jul 10 '19 at 15:11
@EmileBergeron the question makes multiple references to React as part of the problem description. Even if the solution isn't related, it's clear that the problem is perceived as being related to React component lifecycles. I think that merits a tag in this case. — Patrick Roberts, Jul 10 '19 at 15:42
@PatrickRoberts Any references to React could be removed in the question and it would still be clear what the problem is. It would be even clearer without React as it distracts the reader from the root of the problem. In this case, React is only noise and the context is irrelevant. — Emile Bergeron, Jul 10 '19 at 15:46
@EmileBergeron I think that the question is clear as-is, and that without the context, it would be less useful. If you remove the context, you run the risk of making it look like an XY problem. The context here removes that appearance. — Patrick Roberts, Jul 10 '19 at 15:59
@PatrickRoberts I feel like removing React from the context could make this question more generic since it applies to any JS framework. As it stands now, some reader might think that, though the title looks generic, this question isn't describing their problem if they're not using React. The [best questions](https://stackoverflow.com/q/27509/1218980) are short and to the point. — Emile Bergeron, Jul 10 '19 at 16:07
And I can't find a good dupe candidate. All other questions talk about default value in destructuring assignment or about `undefined`, which is irrelevant here. So this question is a good candidate for a generic _"Cannot destructure property of null"_. — Emile Bergeron, Jul 10 '19 at 16:11

score 9 · Accepted Answer · answered Jul 10 '19 at 14:19

When auth is null, there is no way to use a default parameter with destructuring syntax to resolve user without throwing a TypeError.

Just destructure to auth and check if it's truthy:

const Profile = ({ auth }) => {
  const user = auth && auth.user;
  ...
}

Cannot destructure property of null

1 Answers1