Duvidas relacionado ao React

Olá, Albert! Tudo bem?

A adição de classes dinamicamente no React é muito atrelada ao JavaScript puro. Outros frameworks, por não usarem JSX, acabam tendo uma sintaxe mais específica.

Entretanto, no React, apenas precisamos retornar a string que desejamos no campo className. É uma variável? Podemos passar a variável. São duas opções que dependem de uma condição? Podemos usar o if ternário.

<h1 className={variavel}>Olá, mundo!</h1>
<h2 className={ativo ? 'ativo' : 'inativo'}>Como vai?</h2>

No exemplo acima, temos dois casos:

• No h1 estamos passando uma variável que contém um valor string que é o nome da nossa classe.
• No h2 estamos passando a classe ativo se a variável ativo for verdadeira, e inativo se for falsa.

É assim que podemos fazer com React. Não se esqueça também que a lógica é código JavaScript, então precisa ser encapsulado em {} para que o JSX reconheça corretamente.

Espero ter ajudado!

E se precisarmos adicionar uma classe, sem remover as classes antigas?

Albert, você pode fazer isso usando a concatenação de strings. Abaixo um exemplo da própria documentação do React (levemente modificado para seguir o padrão funcional):

export default function Exemplo(props) {
  let className = 'menu'; // esse é o valor inicial, a classe "menu" já vem presente

  // aqui fazemos uma verificação, se recebermos uma prop com isActive sendo true, adicionamos a classe "menu-active"
  if (props.isActive) {
    className += ' menu-active'; // perceba o espaço antes do nome da classe, o valor de className será "menu menu-active"
  }

  return <span className={className}>Menu</span>
}

E você pode usar a criatividade para encontrar a melhor solução para isso, você pode, por exemplo, definir as classes diretamente e adicionar valores:

return <span className={`menu menu-nav ` + (isActive ? 'menu-active' : '')}>Menu</span>

No fim, className (a propriedade do elemento HTML) precisa receber uma string, a string pode conter uma classe, ou várias classes. Contanto que você siga isso, poderá manipular os valores da forma que preferir!

Espero que ajude!