Conditional rendering with typescript -

Question

When trying to conditionally render something from a datastructure, I want the element to appear if there exists a record of it in the dataset, but not if it doesnt. My attempt for this was this:

// other code...

{patient.address[0]
    ? patient.address[0].line[0]
    : null}

// other code...

This works for instances where the field is present, but when it isnt - i get a " TypeError: Cannot read property '0' of undefined".

I think the problem is that when trying to access .address[0], the error gets thrown due to the array not existing on the dataset, before it can enter the conditional. How can I ammend my approach to fix this?

Roberto Zvjerković · Accepted Answer · 2020-06-29 11:06:45Z

4

You can just use a couple of question marks:

patient?.address?.[0]?.line?.[0];

https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#optional-chaining

answered Jun 29, 2020 at 11:06

Roberto Zvjerković

10.2k4 gold badges31 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Turtleneck Over a year ago

Thank you! I wasn't aware this was possible, and simplified the task.

Nithish · Accepted Answer · 2020-06-29 11:28:42Z

1

You can check in different ways

Using optional chaining like below, you can explore more about Optional chaining here

{patient?.address?.[0]?.line?.[0] ?? null}

By using default values like below

{((patient || {}).address || [])[0]
    ? ((((patient || {}).address || [])[0]).line || [])[0]
    : null}

Simplified version of above

let address = ((patient || {}).address || [])[0]
{ address ? (address.line || [])[0] : null}

edited Jun 29, 2020 at 11:28

answered Jun 29, 2020 at 11:12

Nithish

6,1273 gold badges13 silver badges25 bronze badges

6 Comments

Roberto Zvjerković Over a year ago

You don't need ternary with your first example, since it already defaults to undefined. If you really need null instead (which you don't, it's the same thing in React render), you can simplify it to patient?.address?.[0]?.line?.[0] ?? null

Turtleneck Over a year ago

Thank you for your answer Nithish, and thank you for the comment, @ritaj. I was wondering about exactly that, as this is how it reacted in my app.

ford04 Over a year ago

?? null would be still needed, if you return the value directly in render/ the function body.

Roberto Zvjerković Over a year ago

No, render can take null, undefined, false or true and it will behave the same

ford04 Over a year ago

@ritaj No, you cannot directly return undefined in a component, take a look at their API docs. Though something like return <div>{undefined}</div> is possible.

|

Jurshsmith · Accepted Answer · 2020-06-29 11:19:05Z

0

Use this short circuit approach:

patient?.address?.0?.line && patient.address[0].line[0]

answered Jun 29, 2020 at 11:19

Jurshsmith

1822 silver badges4 bronze badges

Collectives™ on Stack Overflow

Conditional rendering with typescript -

3 Answers 3

1 Comment

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related