How to use conditional operator in react js

Question

In many places I'm setting modified by, created by etc:

const test = this.state.isValueEdited
? {
  modifiedById: getLoggedInUser().userId,
}
: {
 // TODO
};

How could I check if getLoggedInUser has some value, than access .userId.. otherwise lets set null.

Thanks

Cheers

Dupocas · Accepted Answer · 2019-09-04T17:43:53.120

3

Also using the ternary operator

 modifiedById: getLoggedInUser() ? getLoggedInUser().userId : null

To avoid executing twice

const evaluation = getLoggedInUser()

{modifiedById: evaluation ? evaluation.userId : null}

edited Sep 04 '19 at 17:43

answered Sep 04 '19 at 17:17

Dupocas

20,285
6
38
56

1

This will call `getLoggedInUser()` twice. Thats inefficient & might cause unwanted sife effects. – Jonas Wilms Sep 04 '19 at 17:40

Code Maniac · Answer 2 · 2019-09-04T17:21:23.980

3

You can use logical OR ||

modifiedById: ( getLoggedInUser() || { userId: null } ).userId

When the value returned from the getLoggedInUser returns falsy value the {userId : null} will act as default value

This expects value returned from getLoggedUser is falsy value in case it fails the condition

edited Sep 04 '19 at 17:21

answered Sep 04 '19 at 17:18

Code Maniac

37,143
5
39
60

can you explain this line please `getLoggedInUser() || { userId: null }` This means even if userId is null try to access it ? or ? – Roxy'Pro Sep 04 '19 at 17:20
Neat! Not the biggest fan of this syntax but it sure gets the job done – Dupocas Sep 04 '19 at 17:22
@Roxy'Pro when the value returned from the `getLoggedInUser` is falsy than only `{userId: null}` will come into picture, logical OR start evaluating expression from left and stop once it finds true value, if none of the value is true it returns the last value from expression, so here in `getLoggedInUser` returns falsy value than only the `{userId: null}` will be used else the value returned from function will be used – Code Maniac Sep 04 '19 at 17:23
Down voter care to comment :/ – Code Maniac Sep 04 '19 at 17:45

score 2 · Answer 3 · answered Sep 04 '19 at 17:26

You can retrieve the user first, then you can use the && operator to get the userId only if user returns truthy. false, null, undefined, "", 0, NaN are falsy values

const user = getLoggedInUser() || null;

const test = this.state.isValueEdited ? ({
  modifiedById: user && user.userId,
}) : ...

If getLoggedInUser already returns null when the user is not logged, you can omit the || null

How to use conditional operator in react js

3 Answers3