Entrar Ainda não tem acesso?
2
respostas

Passar props entre componentes

Referente ao curso React parte 1: componentes reutilizáveis para sua webapp

por Edson Martins
| 165.6k xp | 21 posts
Developer

Estou com o seguinte problema: tenho uma listagem de produtos(componente: Products.js) e ao selecionar um, quero que apareça seu conteúdo no componente: Product.js

Estou usando Router e Link. Não consegui passar o props assim como passo no App. Como eu passo apenas o elemento selecionado?

App.js

<div className="container">
  <Route path="/products/:productId" component={Product} />
  <Route exact path="/" render={() => (
    <Products products={this.state.products} />
  )} />
</div>

Products.js

{ this.props.products.map((product) =>

  <Link to={`/products/${product.id}`}>
    <Row className="product" key={product.id}>
      <Col md={1}>{product.id}</Col>
    </Row>
  </Link>

  )}

Product.js

<div className="container">
  <Link to="/">Back</Link>
  <Row>
    <strong>Product Id</strong>
  </Row>
  <Row>
    {apresentar o valor do produto selecionado}
  </Row>
</div>
2 respostas
por Mario Souto
| 377.3k xp | 735 posts
Alura Scuba Team Instrutor e Desenvolvedor

Edson Martins, tudo bom? Fiquei com um pouco de dúvida sobre como está sua estrutura. Quando você clica no link, você tem uma route configurada para receber parâmetros? Resgatar o estado da rota anterior pode gerar algumas complicações, você poderia acessar a nova rota passando algum id ou info de referência e fazer um novo ajax e pegar as infos que você deseja exibir.

por Edson Martins
| 165.6k xp | 21 posts
Developer

Tudo bem Mario?

Você teria algum exemplo prático?

A minha rota está configurada da seguinte forma:

 <Route path="/products/:productId" component={Product} />
  <Route exact path="/" render={() => (
    <Products products={this.state.products} />
  )} />

Consigo acessar sem problemas /products/001 e apresentar o conteúdo que está em Product:

<div className="container">
  <Link to="/">Back</Link>
  <Row>
    <strong>Product Id</strong>
  </Row>
  <Row>
   <h1> Número do meu produto</h1>
  </Row>
</div>

Como eu poderia pegar as informações do ID e também como eu as passaria para o componente Product?

Obrigado