How can dialogs be opened and populated from dynamically mapped cards?

July 5, 2022

I have an array of JSON data which is mapped to MUI cards. The cards contain a button which opens a dialog. I want to pass the value GroupName into the dialog when I click the button in the cards. In actuality, I have 9 cards. Each card has its own GroupName and associated data. I need the button in each card to open one dialog populated with just the GroupName right now.

const [questionGroups, setQuestionGroups] = useState("");
const [qDialogOpen, setQDialogOpen] = useState(false);
const openQuestionsDialog = () => {
    setQDialogOpen(true);
};

const handleDialogClose = () => {
    setQDialogOpen(false);
};

function QuestionsDialog() {
    return (
        <Dialog open={qDialogOpen} onClose={handleDialogClose} maxWidth={"xl"}>
            <DialogTitle id="form-dialog-title">GROUP NAME HERE</DialogTitle>
            <DialogActions>
                <Button onClick={handleDialogClose}>OK</Button>
            </DialogActions>
        </Dialog>
    );
}

This is how data is mapped to the cards

function DisplayCards() {
    return (
        <div>
            {questionGroups?.displaygroups?.IntakeValidations?.map((group, groupIndex) => {
                return (
                    <Card className={classes.card}>
                        <CardHeader className={classes.cardTitle} title={group.GroupName} subheader={group.OwnerName} />
                        <CardActions className={classes.cardActions}>
                            <Button className={classes.cardBtns} onClick={openQuestionsDialog}>
                                Edit {group.GroupName} Answers
                            </Button>
                        </CardActions>
                    </Card>
                );
            })}
        </div>
    );
}

Here is a shortened sample of my JSON:

{
  "displaygroups": {
    "IntakeValidations": [
      {
        "GroupId": 7,
        "GroupName": "DDD",
        "OwnerName": "Ciaran Crowley DDD",
      },
      {
        "GroupId": 8,
        "GroupName": "AAA",
        "OwnerName": "Ciaran Crowley AAA",
      },
      {
        "GroupId": 9,
        "GroupName": "BBB",
        "OwnerName": "Ciaran Crowley BBB",
      },
      {
        "GroupId": 10,
        "GroupName": "CCC",
        "OwnerName": "Ciaran Crowley CCC",
      }
    ]
  }
}

>Solution :

You can store groupName in qDialogOpen state

<Button className={classes.cardBtns} onClick={() => openQuestionsDialog(group.GroupName)}>
    Edit {group.GroupName} Answers
</Button>

const [qDialogOpen, setQDialogOpen] = useState(false);
const openQuestionsDialog = (groupName) => {
    setQDialogOpen(groupName);
};

const handleDialogClose = () => {
    setQDialogOpen(false);
};

function QuestionsDialog() {
    return (
        <Dialog open={qDialogOpen} onClose={handleDialogClose} maxWidth={"xl"}>
            <DialogTitle id="form-dialog-title">{qDialogOpen}</DialogTitle>
            <DialogActions>
                <Button onClick={handleDialogClose}>OK</Button>
            </DialogActions>
        </Dialog>
    );
}