1

I am using the below statement to conditionally render a component.

{data?.length && <RenderThisComp />}

data - an array.

RenderThisComp - a component that needs to be rendered only if data array has any value.

If the length of data array is zero, it is showing zero, whereas it should display nothing.

Improve this question
5
  • {data.length && <RenderThisComp/>} Commented Apr 14, 2020 at 6:55
  • Optional chaining is a stage 4 proposal, you might want to enable those in your webpack config. Commented Apr 14, 2020 at 6:56
  • Personally, I would just use (data || []).length && < ... >. Commented Apr 14, 2020 at 6:57
  • Given your setup supports optional chaining, {data?.length > 0 && <RenderThisComp />} should work. Commented Apr 14, 2020 at 7:03
  • Optional chaining is not a problem here. I have enabled it from webpack config. Thanks, everyone for replying. I got an answer from here - stackoverflow.com/questions/53048037/… Commented Apr 14, 2020 at 7:26
Related questions
5644
Which equals operator (== vs ===) should be used in JavaScript comparisons?
4212
What does the !! (double exclamation mark) operator do in JavaScript?
1095
Understanding unique keys for array children in React.js
Load 7 more related questions Show fewer related questions

0

Reset to default

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.