Como colocar props em uma string JSX em React

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!