Inline conditional rendering fail

Question

I am trying to do an inline conditional rendering like the following:

 {var && <MyComponent />}

but it throws me this error:

Text strings must be rendered within a <Text> component

However when I do it like this:

{var !== '' && <MyComponent/ >} It works perfectly fine.

Any idea why this happens?

Mahdi N · Accepted Answer · 2020-06-01 10:56:21Z

1

That's because empty string will be rendered in the component as it's a falsy value (because && will return short-circuit value). And in react-native you can't render a string without wrapping it in Text component.

answered Jun 1, 2020 at 10:56

Mahdi N

2,1783 gold badges19 silver badges41 bronze badges

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

Collectives™ on Stack Overflow

Inline conditional rendering fail

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related