1
resposta

[Dúvida] Como enviar dados do produto para editar?

No curso é utilizado o navigation e também o route?.params?.nome para acessar os dados do produto selecionado e assim editar posteriormente. Eu estou fazendo esse projeto com react js, para web. Gostaria de saber qual abordagem utilizar para conseguir enviar os dados do produto selecionado e assim editá-lo.

1 resposta

Olá, Amanda!

Para enviar os dados do produto selecionado e editá-lo em um projeto React JS para web, você pode utilizar algumas abordagens. Uma delas é utilizar o estado do componente para armazenar os dados do produto selecionado e, em seguida, passar esses dados para o componente de edição.

Por exemplo, suponha que você tenha uma lista de produtos e, ao clicar em um deles, deseje editar suas informações. Você pode criar um estado no componente que exibe a lista de produtos para armazenar os dados do produto selecionado. Quando o usuário clicar em um produto, você atualiza o estado com os dados desse produto.

Em seguida, você pode passar esses dados para o componente de edição como propriedades. Dessa forma, o componente de edição terá acesso aos dados do produto selecionado e poderá exibi-los nos campos de edição. Quando o usuário fizer as alterações e clicar em "Salvar", você pode utilizar esses dados para atualizar o produto.

Aqui está um exemplo simplificado de como você pode implementar essa abordagem:

import React, { useState } from 'react';

function ListaProdutos() {
  const [produtoSelecionado, setProdutoSelecionado] = useState(null);

  // Função para atualizar o produto selecionado
  function selecionarProduto(produto) {
    setProdutoSelecionado(produto);
  }

  // Renderização da lista de produtos
  // Ao clicar em um produto, chame a função selecionarProduto passando o produto como parâmetro

  return (
    <div>
      {/* Renderização da lista de produtos */}
      {/* Ao clicar em um produto, chame a função selecionarProduto passando o produto como parâmetro */}
    </div>
  );
}

function EdicaoProduto({ produto }) {
  // Componente de edição do produto
  // Utilize as propriedades do produto para preencher os campos de edição

  return (
    <div>
      {/* Campos de edição */}
      {/* Botão para salvar as alterações */}
    </div>
  );
}

function App() {
  return (
    <div>
      <ListaProdutos />
      {produtoSelecionado && <EdicaoProduto produto={produtoSelecionado} />}
    </div>
  );
}

export default App;

Lembre-se de adaptar esse exemplo ao seu projeto, considerando a estrutura e a lógica que você está utilizando. Espero que isso te ajude a enviar os dados do produto selecionado e editá-lo no seu projeto React JS para web!

Espero ter ajudado e bons estudos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software