Have an array of object lives in state named talks

[
    {
        "firstName": "B",
        "lastName": "W",
        "day": "2022-09-30T23:06:26.000Z",
        "reasons": [
            "Car related questions"
        ],
        "description": ""
    },
    {
        "firstName": "Kevin",
        "lastName": "L",
        "day": "2022-09-30T23:06:26.000Z",
        "reasons": [
            "Car related questions"
        ],
        "description": ""
    },
    {
        "firstName": "M",
        "lastName": "K",
        "day": "2022-09-30T23:06:26.000Z",
        "reasons": [
            "Car related questions"
        ],
        "description": ""
    }
]

There is map function map state's individual object to a Card component

talks.map((talk, index) => {
          return
            <Card>
              <CardHeader
                avatar={
                  <Avatar sx={{ bgcolor: 'secondary.main' }} aria-label="recipe">
                    {talk.firstName.charAt(0)}
                  </Avatar>
                }
                action={
                  <div>
                    <IconButton onClick={(e) => setCardMoreOpen(e.currentTarget)} aria-label="settings">
                      <MoreVertIcon />
                    </IconButton>
                    <StyledEngineProvider injectFirst>
                      <Menu
                        elevation={1}
                        id="basic-menu"
                        anchorEl={cardMoreOpen}
                        open={Boolean(cardMoreOpen)}
                        onClose={() => setCardMoreOpen(null)}
                      >
                        <MenuItem key={index} onClick={menuUpdate(index)}>Edit</MenuItem>
                        <MenuItem onClick={() => setCardMoreOpen(null)}>Delete</MenuItem>
                      </Menu>
                    </StyledEngineProvider>
                  </div>
                }
                title={title}
                subheader={time}
              />
              <CardContent>
                {
                  reasons.map(
                    (reason, index) => (
                      reason === 'Other' ?
                        <Typography key={index} variant="body2">
                          {description}
                        </Typography> :
                        <Typography key={index} variant="body2">
                          {reason}
                        </Typography>
                    )
                  )
                }
              </CardContent>
            </Card>

Ideally, menuUpdate(index) inside <MenuItem key={index} onClick={menuUpdate(index)}>Edit</MenuItem>can update the state variable, so each card component associates with each object in state array and has the ability to update the state object.

const menuUpdate = index => e=> {
    console.log(index)
  }

However, the index is always the last index of the state array. I also tried use arrow function in onClick, onClick={()=>menuUpdate(index)} and callback function as

const menuUpdate = (index) => {
    console.log(index)
  }

No luck. Anyone can give help? Been stuck here for a long time. Thanks in advance!

CodePudding user response：

I figured out the answer by myself. I need to extract the Card into another component and pass the index as prop so I can update it individually. Hopefully, this helps.

CodePudding user response：

بسم الله الرحمن الرحيم

the function must be Such that

const menuUpdate = (index) => {
  console.log(index)
}

and onClick must be callback function so you can add parameters

onClick={()=>{menuUpdate(index)}}