Alguma vez você já precisou adicionar um estilo em algum elemento baseado em uma condição?
Você sabe como adicionar um operador ternário no estilo, no React?
É muito simples, só precisamos nos atentar na quantidade de chaves {}!
Vamos imaginar um cenário onde queremos que a cor onde está escrita a nota do aluno seja diferente de acordo com a situação dele.
Caso a nota seja maior que 6, deve exibir a nota em azul.
Caso a nota seja menor que 6, deve exibir a nota em vermelho
Então, para fazermos essa condição, usaremos o operador ternário no react, no elemento p, da seguinte forma:
1 | <p style={notaAluno > 6 ? { color: "blue" } : { color: "red" }}>{notaAluno}</p> |
Ou também podemos fazer:
1 | <p style={{ color: notaAluno > 6 ? "blue" : "red" }}>{notaAluno}</p> |
Particularmente, eu prefiro essa última opção, mas você pode usar a que achar que fica mais legível, entendível!
