Como aplicar classes de forma condicional no React JS

Neste artigo você aprenderá a como aplicar classes de forma condicional no React, para ter estilos dependendo de condições específicas

Fala programador(a), beelza? Bora aprender mais sobre React!

Ao criar aplicações web interativas com React JS, frequentemente é necessário alterar o estilo de um componente com base no estado da aplicação ou nas propriedades do componente.

Uma maneira comum de fazer isso é adicionando ou removendo classes CSS dos elementos do componente de forma condicional.

Neste artigo, vamos explorar como podemos aplicar classes de forma condicional em um componente React JS.

A Abordagem JavaScript Pura

React, sendo uma biblioteca JavaScript, permite que você utilize todas as capacidades do JavaScript para manipular a renderização de seus componentes.

Uma forma simples e direta de aplicar classes condicionalmente é usando operadores ternários JavaScript dentro da propriedade className de um elemento JSX.

import React from 'react';

function Button({ isActive }) {
  return (
    <button className={isActive ? 'active' : 'inactive'}>
      Clique aqui
    </button>
  );
}

Neste exemplo, a classe do botão será ‘active’ se a prop isActive for verdadeira e ‘inactive’ caso contrário.

Utilizando Expressões JavaScript

Outra maneira de gerenciar classes condicionais é através da concatenação de strings ou da utilização de template literals.

Isso é especialmente útil quando temos mais de uma classe para aplicar de forma condicional.

import React from 'react';

function Button({ isActive, isDisabled }) {
  return (
    <button className={`button ${isActive ? 'active' : ''} ${isDisabled ? 'disabled' : ''}`}>
      Clique aqui
    </button>
  );
}

Este exemplo adiciona a classe ‘active’ se isActive for verdadeiro, e a classe ‘disabled’ se isDisabled for verdadeiro. Se ambas as props forem falsas, o botão terá apenas a classe ‘button’.

Usando a Biblioteca classnames

Se você achar que as abordagens acima estão se tornando confusas ou verbosas, especialmente para componentes que têm muitas classes condicionais, você pode considerar o uso da biblioteca classnames.

A biblioteca classnames é uma popular biblioteca JavaScript que simplifica a criação de strings de classes em JavaScript.

Vamos ver como poderíamos reescrever o exemplo anterior usando classnames.

import React from 'react';
import classNames from 'classnames';

function Button({ isActive, isDisabled }) {
  const buttonClasses = classNames('button', {
    'active': isActive,
    'disabled': isDisabled
  });

  return (
    <button className={buttonClasses}>
      Clique aqui
    </button>
  );
}

Com a biblioteca classnames, podemos passar um objeto onde as chaves são os nomes das classes e os valores são as condições.

Se a condição para uma chave for verdadeira, a classe correspondente será adicionada à string final.

Esta abordagem torna o código mais legível e mais fácil de manter à medida que a quantidade de classes e condições cresce.

Quer aprender mais sobre programação? Conheça nosso canal no YouTube:

Conclusão

A capacidade de aplicar classes de forma condicional é essencial para criar interfaces de usuário reativas com React.

Embora o React não forneça uma maneira integrada de fazer isso, a flexibilidade do JavaScript oferece várias abordagens que você pode usar.

Se você está apenas lidando com uma ou duas classes condicionais, operadores ternários ou expressões JavaScript podem ser suficientes.

No entanto, para componentes mais complexos com várias classes condicionais, a biblioteca classnames pode tornar seu código mais limpo e mais fácil de gerenciar.

Independentemente da abordagem que você escolher, o importante é entender a lógica por trás da aplicação condicional de classes e escolher a abordagem que melhor se adapta ao seu caso de uso.

Está buscando em evoluir como Programador? Confira o nossos cursos de programação.