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>