unable to display map conditionally

[omerbrandis]

hi,

first of all, wonderful post , thanks a lot.
( + I can also suggest you may want to add a version with typescript ).

and not to my main point
I wish to display the map conditionally. ( i.e. depending on some external prop value ).
the first thing that cam to mind was adding a simple if ()..return(<></>) right after the MapWrapper definition.
this seems to work. ( running in next.js dev mode, does not "execute" check typescript ... got the expected/desired results in chrome)
but react hook rules state that they must not be called conditionally. (next.js build fails with Error: React Hook "useState" is called conditionally....)
so I tried moving the "if()..return" to right after "// render component"
but this lead to the map not being displayed at all.

Can anyone suggest a reason for this behavior?
or a method to debug this issue?
or an alternative solution ? ( would rewriting using a react class , allow avoiding using react hooks and solve the problem?)

thanks,
Omer.

[omerbrandis]

I solved my problem using the html div hidden attribute,
but it feels like a workaround, not the "react" way.

[kirtan-desai]

Could you provide a code sandbox so I can take a look at your code?