Aprenda React
Descrevendo a IU

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. Às vezes, você pode querer adicionar um pouco de lógica JavaScript ou referenciar uma propriedade dinâmica dentro deste bloco de tags. Nessa situação, você pode usar chaves em seu JSX para abrir uma janela para o JavaScript.

Você aprenderá

  • Como passar strings com aspas
  • Como fazer referência a uma variável JavaScript dentro do JSX usando chaves
  • Como chamar uma função JavaScript dentro da JSX com chaves
  • Como usar um objeto JavaScript dentro da JSX com chaves

Passando strings com aspas

Quando você quiser passar um atributo de string para a JSX, coloque-o entre aspas simples ou duplas:

export default function Avatar() {
  return (
    <img
      className="avatar"
      src="https://i.imgur.com/7vQD0fPs.jpg"
      alt="Gregorio Y. Zara"
    />
  );
}

Neste caso, "https://i.imgur.com/7vQD0fPs.jpg" e "Gregorio Y. Zara" estão sendo passados como strings.

Mas e se você quiser especificar dinamicamente o atributo src ou alt? Você poderia usar um valor do JavaScript substituindo " e " por { e }:

export default function Avatar() {
  const avatar = 'https://i.imgur.com/7vQD0fPs.jpg';
  const description = 'Gregorio Y. Zara';
  return (
    <img
      className="avatar"
      src={avatar}
      alt={description}
    />
  );
}

Perceba a diferença entre className="avatar", que especifica um nome de classe CSS "avatar" para tornar a imagem redonda, e src={avatar}, que lê o valor da variável JavaScript chamada avatar. Isso ocorre porque as chaves permitem que você trabalhe com JavaScript diretamente em seu bloco de tags!

Usando chaves: Uma janela para o mundo do JavaScript

JSX é uma forma especial de escrever JavaScript. Isso significa que é possível usar JavaScript dentro dela - com chaves { }. O exemplo abaixo primeiro declara um nome para o cientista, name, e depois o insere o dentro do <h1> com chaves:

export default function TodoList() {
  const name = 'Gregorio Y. Zara';
  return (
    <h1>{name}'s To Do List</h1>
  );
}

Tente trocar o valor do name de 'Gregorio Y. Zara' para 'Hedy Lamarr'. Está vendo como o título da lista muda?

Qualquer expressão JavaScript funcionará entre chaves, incluindo chamadas de função como formatDate():

const today = new Date();

function formatDate(date) {
  return new Intl.DateTimeFormat(
    'en-US',
    { weekday: 'long' }
  ).format(date);
}

export default function TodoList() {
  return (
    <h1>To Do List for {formatDate(today)}</h1>
  );
}

Onde usar chaves

Você só pode usar chaves de duas maneiras dentro da JSX:

  1. Como texto diretamente dentro de uma tag JSX: <h1>{nome}'s To Do List</h1> funciona, porém <{tag}>Gregorio Y. Zara's To Do List</{tag}> não funcionará.
  2. Como atributos imediatamente após o sinal =: src={avatar} lerá a variável avatar, mas src="{avatar}" passará a string "{avatar}".

Uso de “chaves duplas”: CSS e outros objetos em JSX

Além de strings, números e outras expressões JavaScript, você pode até passar objetos em JSX. Os objetos também são denotados por chaves, como { name: "Hedy Lamarr", inventions: 5 }. Portanto, para passar um objeto JS em JSX, você deve envolver o objeto em outro par de chaves: person={{ name: "Hedy Lamarr", inventions: 5 }}.

Você pode ver isso com estilos CSS em linha na JSX. 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:

export default function TodoList() {
  return (
    <ul style={{
      backgroundColor: 'black',
      color: 'pink'
    }}>
      <li>Improve the videophone</li>
      <li>Prepare aeronautics lectures</li>
      <li>Work on the alcohol-fuelled engine</li>
    </ul>
  );
}

Tente alterar os valores de backgroundColor e color.

Você pode ver claramente o objeto JavaScript dentro das chaves quando o escreve dessa forma:

<ul style={
  {
    backgroundColor: 'black',
    color: 'pink'
  }
}>

Da próxima vez que você encontrar {{ e }} em JSX, saiba que isso é nada mais do que um objeto dentro das chaves da JSX!

Pitfall

As propriedades de style em linha são escritas em camelCase. Por exemplo, o HTML <ul style="background-color: black"> seria escrito como <ul style={{ backgroundColor: 'black' }}> em seu componente.

Mais diversão com objetos JavaScript e chaves

Você pode colocar várias expressões dentro de um objeto e referenciá-las em seu JSX dentro de chaves:

const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>{person.name}'s Todos</h1>
      <img
        className="avatar"
        src="https://i.imgur.com/7vQD0fPs.jpg"
        alt="Gregorio Y. Zara"
      />
      <ul>
        <li>Improve the videophone</li>
        <li>Prepare aeronautics lectures</li>
        <li>Work on the alcohol-fuelled engine</li>
      </ul>
    </div>
  );
}

Neste exemplo, o objeto JavaScript person contém uma string name e um objeto theme:

const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

O componente pode usar os valores de person da seguinte forma:

<div style={person.theme}>
  <h1>{person.name}'s Todos</h1>

JSX é uma linguagem de modelação mínima, pois permite que você organize dados e lógica usando JavaScript.

Recap

Agora você sabe quase tudo sobre JSX:

  • Os atributos JSX entre aspas são passados como strings.
  • As chaves permitem que você inclua a lógica e as variáveis do JavaScript em seu bloco de tags.
  • Elas funcionam dentro do conteúdo da tag JSX ou imediatamente após = em atributos.
  • {{ e }} não é uma sintaxe especial: é um objeto JavaScript colocado entre chaves JSX.

Try out some challenges

Challenge 1 of 3:
Corrija o erro

Este código é interrompido com um erro dizendo Objetos não são válidos como um filho React:

const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>{person}'s Todos</h1>
      <img
        className="avatar"
        src="https://i.imgur.com/7vQD0fPs.jpg"
        alt="Gregorio Y. Zara"
      />
      <ul>
        <li>Improve the videophone</li>
        <li>Prepare aeronautics lectures</li>
        <li>Work on the alcohol-fuelled engine</li>
      </ul>
    </div>
  );
}

Você consegue identificar o problema?

PreviousEscrevendo Tags com JSX
NextPassando Props para um Componente