I have implemented some standard mapping logic.
{MEMBERSHIPS.map((mItem, index) => (
<TableCell
className="text-uppercase text-center"
colSpan={2}
padding="dense"
value={mItem.label}
key={mItem.key}
>
<Button onClick={this.handleClickOpen}>{mItem.label}</Button>
<Dialog
disableBackdropClick
disableEscapeKeyDown
open={this.state.open}
onClose={this.handleClose}
>
<DialogTitle>
Choose bulk edit {mItem.label} status
</DialogTitle>
...
The value of {mItem.label} is correctly displaying the headers, but when I reuse that key within the mapping statement, it only shows the last item in the array... I expected {mItem.label} to remain consistent wherever it is used.
https://codesandbox.io/s/kxrk5mnqjr
If you visit the above codesandbox... click on a header like seniors, juniors, or infants - this will trigger a button
<Button onClick={this.handleClickOpen}>{mItem.label}</Button>
A dialog will open where I want to display the same heading value {mItem.label}, but the displayed result does not match the header. For example, clicking the Seniors button should show the Seniors dialog text, but instead it displays "infants" in all instances.