Show Props Data into the Dialog Box in React

Question

Am new to React JS and i am Developing some sample eCommerce based application as my realtime application so i am stuck with one issue.

In Products List there is Buy button, If i click on the button one dialog box should pop with respective product details

I wrote two components one is ProductCard and DialogImage Components

am showing list of products in ProductCard here is the code

import React, { useState, useEffect } from "react";
import Paper from "@material-ui/core/Paper";
import Grid from "@material-ui/core/Grid";
import Box from "@material-ui/core/Box";
import axios from "axios";
import Button from "@material-ui/core/Button";
import { Container } from "@material-ui/core";
import DialogImage from "../pages/DialogImage";



export default function ProductCard(props) {
 const classes = useStyles();
 const [products, setProducts] = useState([]);

const fetchProducts = () => {
axios.get("http://images.stockal.com/api/products.json").then(response => {
  console.log(response.data);
  setProducts(response.data.data.products);
});
};

useEffect(() => {
 fetchProducts();
}, []);

const [openModal, setModal] = useState(false);
const [image, setImage] = useState('');
const [size, setSize] = useState('');

function selectedproduct(searchImage, sizes) {
  setModal(true);
  setImage(searchImage);
  setSize(sizes);
}

return (
<div className={classes.root}>
  <Container>

    <DialogImage modal={openModal} productImage={image} productSize={size}  />
    <Grid container spacing={6}>
      {products.map((event, index) => {
        return (
          <Grid item xs={12} sm={12} md={6} lg={4} xl={4} key={index}>
            <Paper className={classes.paper}>
              <Grid container spacing={2}>
                <Grid item xs={5}>
                  <img
                    src={event.searchImage}
                    alt={event.product}
                    width="100%"
                  />
                </Grid>
                <Grid item xs={7}>
                  <Box fontWeight="fontWeightBold" m={1}>
                    {event.productName}
                  </Box>
                  <Box m={1}> Price: Rs. {event.price} \- </Box>
                  <Box m={1}> Brand: {event.brand} </Box>
                  <Box m={1}> Sizes: {event.sizes} </Box>
                </Grid>
              </Grid>
              <Button
                variant="contained"
                fullWidth
                color="primary"
                onClick={selectedproduct.bind(
                  this,
                  event.searchImage,
                  event.sizes
                )}
              >
                Buy
              </Button>
            </Paper>
          </Grid>
        );
      })}
    </Grid>
  </Container>
</div>
);}

and DialogImage Component

export default function DialogImage(props) {
console.log(props);
const [open, setOpen] = useState(false);
const [image, setImage] = useState("");
const [size, setSize] = useState("");

const handleClickOpen = () => {
setOpen(true);
setImage(props.productImage);
setSize(props.productSize);
};

const handleClose = () => {
setOpen(false);
setImage("");
setSize("");
};

return (
<div>
  <Dialog
    open={open}
    onClose={handleClose}
    aria-labelledby="draggable-dialog-title"
  >
    <DialogTitle style={{ cursor: "move" }} id="draggable-dialog-title">
      Product Name:
    </DialogTitle>
    <DialogContent>
      <DialogContentText>
        <img src={image} alt="Product Name" width="100%" />
        <Box>Product Size: {size}</Box>
      </DialogContentText>
    </DialogContent>
    <DialogActions>
      <Button onClick={handleClose} color="primary">
        Cancel
      </Button>
      <Button onClick={handleClose} color="primary">
        Subscribe
      </Button>
    </DialogActions>
  </Dialog>
</div>
);}

Here is the Image when i executed the code, am sending data as props to the DialogImage Component as you can see the console above posted image but i am not getting how to trigger or open the Modal Pop up from the ProductCard Component Please can you help me in this

as am new beginner to React

Answer 1

You do not need to have opening, closing logic and the isDialogOpen state both inside and outside of the Dialog. Just maintain your Dialog's open, close handlers and isOpen state inside ProductCard component.

const handleDialogOpen = () => {
   setOpen(true);
   setImage(props.productImage);
   setSize(props.productSize);
 };

const handleDialogClose = () => {
   setOpen(false)
   setImage(null)
   setSize(null)
};

...
<DialogImage open={openModal} onClose={handleDialogClose} productImage={image} productSize={size}  />

Then inside your <DialogImage/> component,

export default function DialogImage(props) {
   //you don't need state in here
    return <Dialog
             open={props.open}
             onClose={props.onClose}
             aria-labelledby="draggable-dialog-title">