Neste artigo você vai aprender a como colocar props em uma string nas strings de atributos do JSX, na biblioteca React.js
Fala programador(a), beleza? Bora aprender mais sobre React.js e também JSX!
Há diversas tags no HTML que precisam de configuração de atributos
A mais clássica é a tag img, para imagens
No HTML comum fazemos desta maneira:
<img src="foto.png" />
Porém se tentamos acessar propriedades em string no JSX, não obtemos êxito
Algo como este trecho:
<img src="algumaProp" />
Então para resolver isso, vamos utilizar o recurso de template expression
Que permite escrever código JavaScritp no JSX, e pode ser inserido nos atributos
O exemplo acima fica então:
<img src={algumaProp} />
Ou seja, basta adicionar a sintaxe de { }, e entre as chaves colocar código JS
Se você precisa colocar a imagem em algum path, pode utilizar:
<img src={`assets/${algumaProp}.png`} />
Assim você consegue interpolar variáveis em uma string
Deixe um comentário contando o que achou desta solução 🙂
Quer aprender mais sobre React? Confira o vídeo abaixo:
Conclusão
Neste artigo você viu como colocar props em uma string no JSX do React
Basta utilizar a sintaxe de template expression, que consiste em colocar o código entre chaves
Você pode criar uma string e interpolar variáveis, se precisar criar um caminho até uma imagem
Caso ela já esteja importada você consegue inserir diretamente o nome da variável, esta maneira é mais simples de aplicar
Deseja programar de forma profissional? Confira o nosso treinamento completo clicando aqui.
Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!
Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!