What is the best practice for checking if the value exists before using it in a component

user_8803036 0
Viewed 96

I have a custom hook that fetches data and then I want to display that data.

But it isn't available at render so I've been doing this

<li>{data && data.name}</li>

Is there a better way?

reactjs javascript
3 Answers

I would do something like this

{data.name && 
  <li>{data.name}</li>
}

This way the tag is only rendered if the exact value exists otherwise no element will be rendered.

user_69089640

the best way and much more optimized way is

<li>{data?.name}</li>
user_138643580

You can do:

{data && <li>data.name</li>}
user_44426060
Related