-1

Tenho uma aplicação em React que busca produtos de uma api, quero renderizar uma tabela onde cada item tem um botão que abre o modal e atualiza (manda um PUT na API) o produto. Só que o modal tá recebendo sempre o id 1, como se não recebesse os outros.

Segue o código:

import ModalUpdate from './ModalUpdate';

const [showModalUpdate, setShowModalUpdate] = useState(false);

<TableBody>
    {products.map(item => (
      <TableRow key={item.id}>
        <TableCell>{item.name}</TableCell>
        <TableCell>{item.points}</TableCell>
        <TableCell>
            <Button onClick={()=>{openModalUpdate()}}>
                Atualizar
            </Button>
            {showModalUpdate ? (
                <ModalUpdate
                    open={showModalUpdate}
                    id={item.id}             
                    onClose={closeModalUpdate}
                />
          ) : null}
        </TableCell>
      </TableRow>
</TableBody>
1
  • Eu acho que o problema é no estado, que é compartilhado para todos os Modal. Tem que ter um status para cada Modal.
    – novic
    Commented 22/05/2020 às 15:38

1 Resposta 1

-1

Experimenta criar uma função para selecionar o produto

activeProduct(product, index) {
    this.setState({
        current: product,
        currentIndex: index
    })
}

Depois no render aqui está no formato de lista, irá precisar alterar para sua tabela

render()
 const { product, currentProduct, currentIndex } = this.state

    <ul className="list-group">
                            {products && products.map((product, index) => (
                                <li 
                                    className={"list-group-item " + (index === currentIndex ? "active" : "")} 
                                    onClick={() => this.activeProduct(product, index)} 
                                    key={index} >
                                        {product.name}
                                </li>
                            )) }
                        </ul>
    <div className="col-md-6">
      {currentMembro ? (
         {currentProduct.name}
         {currentProduct.points} )
    </div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .