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!