How can I pass data from one card, in a list of cards, to a dialog?

Question

I want to add a confirmation step for my CRUD application using a Material-UI dialog, but I don't seem to be able to pass any data to my dialog.

I have a list/grid of cards that I've created using .map(), each of which contains data I pulled from a MongoDB document. I'm able to delete the documents/cards from my app with just a button, but now I'd like to add a confirmation step to the deletion process, using a Material-UI dialog. To do that, I need to pass data from the cards to the dialog (if that's the correct phrasing for what I'm trying to do). I can't figure out how to do that.

I've tried passing the data using this.props.match.params.id, this.id, this._id, this.oneSavedArticle.id, and this.props.oneSavedArticle.id, but they all have either returned an error or undefined.

Here is my delete function:

  handleDelete = id => {
    console.log(id);
    API.deleteArticle(this)
      .then(res => console.log(res.data))
      .catch(err => console.log(err));

    // this.props.history.push("/saved");
  };

Here is my dialog:

      <div>
        <Button
          color="secondary"
          variant="outlined"
          onClick={this.handleClickOpen}
        >
          DELETE
        </Button>
        <Dialog
          open={this.state.open}
          TransitionComponent={Transition}
          keepMounted
          onClose={this.handleClose}
          aria-labelledby="alert-dialog-slide-title"
          aria-describedby="alert-dialog-slide-description"
        >
          <DialogTitle>
            {"Delete this article?"}
          </DialogTitle>
          <Divider variant="middle" />
          <DialogActions>
            <Button onClick={this.handleClose} color="secondary">
              NO
            </Button>
            <Button
              onClick={() => this.handleDelete(this.props)}
              color="primary"
            >
              YES
            </Button>
          </DialogActions>
        </Dialog>
      </div>

Here is my API route:

  deleteArticle: function(id) {
    return axios.delete("/api/articles/" + id);
  }

Here is where and how I've implemented the dialog into my list of cards:

        {this.state.savedArticles.length ? (
          <Grid>
            {this.state.savedArticles.map((oneSavedArticle, i) => (
              <Card style={savedArticleCard} key={i}>
                <Typography variant="h5">{oneSavedArticle.headline}</Typography>
                <Divider variant="middle" />
                <Typography>{oneSavedArticle.snippet}</Typography>
                <a href={oneSavedArticle.web_url} style={linkStyles}>
                  <Button style={buttonStyles}>READ IT</Button>
                </a>

                <DeleteDialogue {...this.props} />
              </Card>
            ))}
          </Grid>

As you can expect, I'd just like to be able to pass the data from to card to the dialog so I can get my delete function functioning correctly.

If I've left out any info, or haven't provided enough code, or haven't explained something clearly enough, please let me know.

Many thanks ahead of time!

Answer 1

If I understand correctly, the DeleteDialogue is the dialog component that you are talking about. If so, try passing a specific prop to the dialog and use it in the dialog. Something like that:

{this.state.savedArticles.length ? (
          <Grid>
            {this.state.savedArticles.map((oneSavedArticle, i) => (
              <Card style={savedArticleCard} key={i}>
                <Typography variant="h5">{oneSavedArticle.headline}</Typography>
                <Divider variant="middle" />
                <Typography>{oneSavedArticle.snippet}</Typography>
                <a href={oneSavedArticle.web_url} style={linkStyles}>
                  <Button style={buttonStyles}>READ IT</Button>
                </a>
                <DeleteDialogue id={oneSavedArticle.id} />
              </Card>
            ))}
          </Grid>

And in the dialog:

<div>
        <Button
          color="secondary"
          variant="outlined"
          onClick={this.handleClickOpen}
        >
          DELETE
        </Button>
        <Dialog
          open={this.state.open}
          TransitionComponent={Transition}
          keepMounted
          onClose={this.handleClose}
          aria-labelledby="alert-dialog-slide-title"
          aria-describedby="alert-dialog-slide-description"
        >
          <DialogTitle>
            {"Delete this article?"}
          </DialogTitle>
          <Divider variant="middle" />
          <DialogActions>
            <Button onClick={this.handleClose} color="secondary">
              NO
            </Button>
            <Button
              onClick={() => this.handleDelete(this.props.id)}
              color="primary"
            >
              YES
            </Button>
          </DialogActions>
        </Dialog>
      </div>

I think its suppose to work that way..