Bom dia Gabriel
O caracter !
- É um operador lógico do Javascript o qual tem a finalidade de aplicar uma negação, ou seja, no próprio exemplo do seu código, se caso o valor de "expandida" começar com false (false), ao passar na linha do seu código será avaliado o oposto de seu valor, ou seja, será avaliado se "expandida" é true(verdadeiro) e somente se for true, é que será renderizado o
<BotaoIcone>
, ou seja, será renderizado tudo o que estiver após o operador &&.
O caracter &&
- É um operador lógico do javascript o qual tem a finalidade de comparar expressões / variáveis e que no seu exemplo de código tem o objetivo de renderizar o
<BotaoIcone>
somente se a condição anterior for atendida, ou seja, se o valor de expandida for true.
Faça o teste, para conferir
1)
se caso você definir o valor de expandida diretamente como true, ou qualquer outro valor que o javascript considera como true, logo o seu botão não irá renderizar, uma vez que o oposto de true, é false e assim a primeira condição sendo false, não será renderizado o que vem a seguir, ou seja, o botão
let expandida = true;
return (!expandida && <button>Expandir</button>);
// Não será renderizado o botão
2)
se caso você definir o valor de expandida diretamente como false, ou qualquer outro valor que o javascript considera como false, logo o seu botão será renderizado, uma vez que o oposto de false, é true e assim a primeira condição sendo true, será renderizado o que vem a seguir, ou seja, o botão
let expandida = false;
return (!expandida && <button>Expandir</button>);
// O botão será renderizado
DICAS!
Existe também o operador !! (duas exclamações consecutivas, ou seja, é utilizada para converter um valor numeral ou string, em booleano (lógico) para que se possa fazer validações com o seu valor original....por exemplo, se a variável começar com true e na condição for aplicado !!expandida, o valor será convertido duas vezes e a validação dessa operação retorna true.
Segue apenas para fins de referência, uma matéria explicando os diversos tipos de operadores Operadores Javascript, mais ao final você irá encontrar os operadores que comentei acima.
Espero ter lhe ajudado.
Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓
Atenciosamente
Felipe D.R