Como acessar props em string no React JS

Neste artigo você aprenderá a como acessar props em string no React, uma ação fundamental para utilizar nos componentes de React JS

Fala programador(a), beleza? Bora aprender mais sobre React JS!

Uma das maiores vantagens do React JS é sua flexibilidade. Essa biblioteca JavaScript nos permite manipular dados de maneiras muito variadas para criar interfaces de usuário dinâmicas.

Entre essas possibilidades, está a capacidade de trabalhar com props, que são formas de passar dados entre componentes.

Em alguns casos, precisamos acessar props que estão em formato de string. Este artigo guiará você através dos passos para fazer isso de forma eficiente e otimizada.

Entendendo o Uso de Props no React

O que são Props?

Em React, “props” é uma abreviação para propriedades. Elas são uma forma de um componente pai passar informações para um componente filho.

Simplificando, você pode considerar props como os argumentos de uma função.

Props e Strings

Agora, em muitos cenários, especialmente quando estamos lidando com conteúdo textual, pode ser necessário passar strings como props.

Também pode haver situações em que precisamos acessar uma prop específica cujo nome está em uma string.

Acessando Props em String

Imagine que temos vários componentes que representam diferentes tipos de frutas e suas respectivas informações.

Em vez de criar uma propriedade para cada tipo de fruta, gostaríamos de acessar a propriedade usando uma string.

Exemplo Básico

function Fruta(props) {
  return <div>{props["nomeDaFruta"]}</div>;
}

function App() {
  return <Fruta nomeDaFruta="Maçã" />;
}

No exemplo acima, estamos passando uma prop chamada “nomeDaFruta” e acessando-a usando uma string no componente Fruta.

Caso mais Dinâmico

Vamos tornar isso mais dinâmico. Suponha que temos uma lista de frutas e queremos renderizar cada uma delas usando um componente.

Em vez de criar uma propriedade para cada fruta, podemos passar o nome da propriedade como uma string.

function Fruta(props) {
  const nomeDaProp = "fruta" + props.id;
  return <div>{props[nomeDaProp]}</div>;
}

function App() {
  return (
    <div>
      <Fruta id="1" fruta1="Maçã" />
      <Fruta id="2" fruta2="Banana" />
      <Fruta id="3" fruta3="Pera" />
    </div>
  );
}

No exemplo acima, construímos o nome da propriedade dinamicamente com base no ID fornecido ao componente Fruta.

Precauções ao Acessar Props em String

Sempre Verifique a Existência da Prop

É uma boa prática verificar se a prop que você está tentando acessar existe para evitar erros.

function Fruta(props) {
  const nomeDaProp = "fruta" + props.id;
  return <div>{props[nomeDaProp] ? props[nomeDaProp] : "Fruta não encontrada"}</div>;
}

Acessando Props via Interpolação no React JS

À medida que aprimoramos nossas habilidades no React JS, descobrimos várias formas de realizar uma tarefa, dando-nos mais flexibilidade e adaptabilidade em nosso desenvolvimento.

A interpolação é uma dessas técnicas que, embora possa parecer básica à primeira vista, é extremamente poderosa, especialmente quando combinada com o uso de props.

Vamos explorar como usar a interpolação para acessar props em nossos componentes React.

O que é Interpolação?

A interpolação é um método que nos permite inserir variáveis (ou expressões) dentro de strings.

em muitas linguagens de programação, como o JavaScript, a interpolação é realizada usando template strings.

Acessando Props com Interpolação

A ideia aqui é combinar a interpolação com a passagem de props para criar componentes mais dinâmicos.

Exemplo com Interpolação

Vamos usar o mesmo cenário de frutas mencionado anteriormente. Imagine que, desta vez, queremos criar uma mensagem personalizada para cada fruta.

function Fruta(props) {
  return <div>A minha fruta favorita é: {`${props.nomeDaFruta}`}!</div>;
}

function App() {
  return <Fruta nomeDaFruta="Maçã" />;
}

No exemplo acima, estamos usando a interpolação dentro das chaves {} para renderizar o nome da fruta diretamente dentro de nossa string.

Caso Dinâmico com Interpolação

Suponha que queremos uma descrição mais detalhada para cada fruta. Podemos combinar várias props usando interpolação.

function Fruta(props) {
  return (
    <div>
      A minha fruta favorita é: {`${props.nomeDaFruta}`}, e ela é {`${props.corDaFruta}`}.
    </div>
  );
}

function App() {
  return <Fruta nomeDaFruta="Maçã" corDaFruta="vermelha" />;
}

Aqui, estamos usando interpolação para combinar as props nomeDaFruta e corDaFruta em uma única mensagem.

Quer aprender mais sobre programação? Conheça nosso canal no YouTube:

Conclusão

O React JS, com sua abordagem orientada a componentes, oferece uma grande flexibilidade na forma como manipulamos e transmitimos dados entre componentes.

A capacidade de acessar props usando strings abre um leque de possibilidades, permitindo que criemos aplicações mais dinâmicas e adaptáveis.

No entanto, ao fazer isso, é crucial manter as melhores práticas em mente para garantir que nosso código permaneça limpo, otimizado e livre de erros.

Está buscando em evoluir como Programador? Confira o nossos cursos de programação.