Skip to main content
removeu 504 caracteres do conteúdo; título editado
Fonte Link
novic
  • 36,7mil
  • 4
  • 32
  • 70

Como renderizar um modal num map usando o reactReact?

Tenho uma aplicação em ReactReact que busca produtos de uma api. Eu, 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.

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>

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>

Como renderizar um modal num map usando o react

Tenho uma aplicação em React que busca produtos de uma api. Eu 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.

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>

Como renderizar um modal num map usando o React?

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.

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>
Fonte Link

Como renderizar um modal num map usando o react

Tenho uma aplicação em React que busca produtos de uma api. Eu 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>