MyReactComponent returns a hyperlink and a message after looking up an API using the name value. However I would like to render this ponent (which includes making the API call) only when name is not empty. Would the below solve the purpose or should I approach this differently?

   <dt hidden={null == name || '' === name.trim()}>
      <MyReactComponent name={name || ' '} />
    </dt>

MyReactComponent returns a hyperlink and a message after looking up an API using the name value. However I would like to render this ponent (which includes making the API call) only when name is not empty. Would the below solve the purpose or should I approach this differently?

   <dt hidden={null == name || '' === name.trim()}>
      <MyReactComponent name={name || ' '} />
    </dt>

• javascript
• reactjs
• react-hooks

Share Improve this question Follow edited Jul 11, 2022 at 22:01 dippas 60.6k1515 gold badges123123 silver badges132132 bronze badges asked Jul 11, 2022 at 21:43 Punter VickyPunter Vicky 17.1k6262 gold badges213213 silver badges341341 bronze badges 1

• 2 {name && name.trim() !== "" && <MyReactComponent />}, so in the case MyReactComponent will be rendered if name has some value – user13937286 Commented Jul 11, 2022 at 21:46

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Here is another way you can do this :

{(name && name.trim() !== '') &&
    <MyReactComponent name={name} />
}

You can learn more here.

Instead of using hidden attribute, you can render your ponent with ternary operator:

{name ? <MyReactComponent name={name} /> : null}