Corrigir a exibição de “0” em seu código JSX

Os primeiros dias da Web pareciam o oeste selvagem quando se tratava de práticas de codificação – bastava fazer funcionar. Em seguida, nos conscientizamos das melhores práticas, separando HTML de CSS e JavaScript. Depois vieram o React e o JSX, onde combinamos JavaScript, HTML e até mesmo CSS com componentes estilizados – que bagunça elegante criamos!

De vez em quando, parte dessa bagunça é eu vendo 0 aparecendo na saída do meu código JSX, e me lembro do motivo: manipulação inadequada da tipagem de variáveis, combinada com o uso de &&. Deixe-me explicar!

Um dos padrões populares em JSX é:

<div>Some header</div>
{someValue && <div>Some header</div>}

O padrão faz sentido, mas veja a diferença nas saídas entre os tipos de string e número:

"0" && "Thing"
> "Thing"
0 && "Thing"
> 0

Observe que um valor de string de 0 permite que o segundo valor seja retornado, mas um número digitado 0 simplesmente retorna o 0. A melhor prática é sempre converter o valor em um Boolean em seu JSX:

{Boolean(value) && ....}

Typescript e até mesmo PropTypes podem ajudar a detectar esses problemas, mas até mesmo veteranos experientes às vezes se deparam com esses pontos problemáticos.