DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for React: Neatly hide conditional DOM elements πŸ‘€
Matt Shirlaw
Matt Shirlaw

Posted on

React: Neatly hide conditional DOM elements πŸ‘€

If you are anything like me you always cringe a little bit when you come across something like this in a React project 😬

Without react conditional block

The more conditionals that you have, the worse it gets and the as people add more and more code over time it just gets worse and worse.

To solve this I always end up building a tiny wrapper component to hide this logic away. I'm sure other people do this sort of thing as well so I built a little npm package which will let you do this

With react conditional block

If you are interested you can get it on NPM. It certainly won't save you a heap of time but hey, a minute saved is a minute saved right 😜

Top comments (0)

11 Tips That Make You a Better Typescript Programmer

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!