React looping component with map function, index is wrong

Question

I'm trying to generate component with map function but onChange function having index gives me incremented value why is this giving me wrong index?

currently the array has two objects

{projectState.labels.map((i, k) => (
              <>
                {k === 0 && (
                  <>
                    <Grid container item xs={12}>
                      <Grid item xs={10}>
                        <Autocomplete
                          id="main"
                          ref={(ref) => (autoCompleteRef.current[k] = ref)}
                          name={`label${k + 1}`}
                          options={labelData}
                          getOptionSelected={(option, value) =>
                            option.title === value.title
                          }
                          getOptionLabel={(option) =>
                            option.title ? option.title : ""
                          }
                          classes={{ paper: classes.paper }}
                          ListboxProps={{ style: { maxHeight: "180px" } }}
                          // inputValue={labelData[labelData.length - 1].title}
                          onChange={handleMainLabelFromDropdown(k)}
                          renderInput={(props) => (
                            <TextFieldWithInFocusHelp
                              {...props}
                              required
                              label={`Main Label ${k + 1}`}
                              help="Select the label for the non-defective classification. No sub-labels are allowed for this category."
                            />
                          )}
                        />
                      </Grid>
                      <Grid container item xs={1} alignItems="center">
                        <TooltipStyled
                          placement="right"
                          title="Add new main label."
                        >
                          <IconButton onClick={toggleNewLabelDialogOpen}>
                            <AddCircleIcon color="primary" fontSize="large" />
                          </IconButton>
                        </TooltipStyled>
                        <NewLabelDialog
                          open={newLabelDialogOpen}
                          onClose={toggleNewLabelDialogOpen}
                          onChange={hanldeMainLabelFromDialog(k)}  <--- this is child component. this index returns 1 
                        />
                      </Grid>
                    </Grid>
                  </>
                )}

//This is my handle function.

const hanldeMainLabelFromDialog = index => value =>{
console.log(index)                   //It gives me 1. I thought it had to give me 0.
}

Answer 1

Change your onChange to this: onChange={() => hanldeMainLabelFromDialog(k)}

and you're currying your handler. Change it to,

const hanldeMainLabelFromDialog = index => { }

Edit in response to comment

If you want to return a value from the child and pass the index, change your code to,

onChange={valueFromChild => hanldeMainLabelFromDialog(valueFromChild, k)}

and

const hanldeMainLabelFromDialog = (value, index) => { }