Exibir classe de forma condicional em React

Neste artigo você vai aprender a como exibir classe de forma condicional em React, dentro do atributo className

Fala programador(a), beleza? Bora aprender mais sobre exibição de classe baseada em uma condição!

Um desafio constante nos componentes de React.js é exibir uma classe baseada em uma determinada situação

Geralmente recebemos por props um valor, e queremos que ele habilite uma classe ou outra

O que podemos fazer então?

Basta utilizar o recurso de template strings aliado a um if ternário dentro de className

Veja um exemplo:

<button className={`btn ${login ? 'login-btn' : 'register-btn'}`}>Entrar</button>

No caso acima estamos esperando uma prop chamada login

Se o valor dela for true queremos adicionar a classe login-btn na tag button

E se ela for false, estamos ativando o else do if ternário, isso faz com que a classe register-btn seja implementada

E assim podemos exibir classes de forma condicional em um elemento JSX no React

Conclusão

Neste artigo você aprendeu a como colocar uma classe de forma condicional em React

Utilizamos um if ternário dentro de uma template string, que nos permite incluir expressões de JavaScript e também imprimir strings

Baseado no if uma classe ou outra é adicionada ao nosso elemento

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias! Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias. O link acima contém um cupom de desconto para os cursos!