CODEWITHSUNDEEP
javascriptreactjsmaterial-uireact-component
Abigail Gonzalez
Abigail Gonzalez

Reputation: 97

Trying to open and close a Modal in different components

I am using a Material UI Dialog Form between two components. In the parent component that is Productos.js, I open the component and the child component EditarProductos.js receives the open state from its parent.

I am having trouble because I can only open the dialog once and then I can't open it again.

Below is the code from Productos.js (parent component)


//Code...

import EditarProductos from './EditarProductos';

//Code...

function Productos(props) {

const [open, setOpen] = React.useState(false);

//Code...

function editar(producto){

//Code...

setOpen(true);

}

//Code...

return (

<div>

{id && nombre && precioCompra && precioVenta && cantidad && open &&

<EditarProductos productoEdit={id} productoNombre={nombre} productoPrecioCompra ={precioCompra}

productoPrecioVenta = {precioVenta} productoCantidad = {cantidad} isOpen = {open}/>

}

<br />

//Code...

<br />

<Table className={classes.table}>

<TableHead>

<TableRow>

//Code...

</TableRow>

</TableHead>

<TableBody>

{productos.map((producto) =>

<TableRow className="data-row">

<StyledTableCell>{producto.id
}</StyledTableCell>

<StyledTableCell>{producto.nombre}</StyledTableCell>

<StyledTableCell>{producto.precio_compra}</StyledTableCell>

<StyledTableCell>{producto.precio_venta}</StyledTableCell>

<StyledTableCell>{producto.cantidad}</StyledTableCell>

<StyledTableCell>{producto.categorias_id}</StyledTableCell>

<StyledTableCell>

<Button variant="outlined" onClick={() => editar(producto)}>

<EditIcon />

</Button>

<Button variant="outlined" onClick={() => eliminar(producto)} ><DeleteIcon /> </Button>

</StyledTableCell>

</TableRow>

)}

</TableBody>

</Table>

</div>

);

}

export default Productos;

Below is EditarProdutos.js (child component)


import {Button, TextField, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle} from '@material-ui/core';

function EditarProductos(props){

var abierto = props.isOpen;

const [open, setOpen] = React.useState(abierto);

const handleClose = () => {

abierto = false;

};

//Code...

return (

<div>

<Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">

<DialogTitle id="form-dialog-title">Editar</DialogTitle>

//Code...

<Button onClick={handleClose} color="primary">

Cancelar

</Button>

//Code...

</DialogActions>

</Dialog>

</div>

);

}

export default EditarProductos;

Thank you so much!

Upvotes: 1

Views: 1371

Answers (1)

Martin
Martin

Reputation: 2283

The problem with your code is the internal state that EditarProductos component holds.

The idiomatic and easy solution for this would be, that you pass down the isOpen flag and the handleClose method from the parent, the EditarProductos wouldn't have an internal state, just use the props:

function EditarProductos(props){
  return (
    <div>
      <Dialog open={props.isOpen} onClose={props.handleClose}>
        <DialogTitle>Editar</DialogTitle>

        <DialogActions>
          <Button onClick={props.handleClose} color="primary">
           Cancelar
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

export default EditarProductos;

And in your Productos component you need to define a handleClose method as well (with setOpen(false)) and you need to pass down that too with isOpen

Upvotes: 2

Related Questions