JavaScript em JSX com chaves
JavaScript em JSX com chaves
A sintaxe JSX permite que você escreva tags similares ao HTML dentro de um
arquivo JavaScript, mantendo a lógica de renderização e o conteúdo no
mesmo local.
Nessa situação, você pode usar chaves em seu JSX para abrir uma janela para
o JavaScript.
JavaScript em JSX com chaves
Qualquer expressão JavaScript funcionará entre chaves, incluindo chamadas de função como
formatDate():
Onde usar chaves
Para passar um objeto JS em JSX, você deve envolver o objeto em outro par de
chaves: person={{ name: "Hedy Lamarr", inventions: 5 }}.
O React não exige que você use estilos inline (as classes CSS funcionam muito
bem na maioria dos casos). Mas quando você precisa de um estilo inline, você
passa um objeto para o atributo style
Expressões dentro de um objeto
Você pode colocar várias expressões dentro de um objeto e referenciá-las em seu JSX dentro
de chaves:
o objeto JavaScript person contém uma
string name e um objeto theme
Recapitulando
✓ Como mover dados para fora de componentes e para dentro de estruturas como arrays ou objetos.
✓ Como gerar conjuntos de componentes similares com o map() do JavaScript.
✓ Como criar arrays de itens filtrados com o filter() do JavaScript.
✓ Porquê e como definir key em cada componente dentre uma coleção para que o React possa
acompanhar cada um deles mesmo se sua posição ou dados mudem.