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.
}

Yatrix · Accepted Answer · 2020-08-13 02:07:12Z

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) => { }

edited Aug 13, 2020 at 2:07

answered Aug 13, 2020 at 1:49

Yatrix

13.9k17 gold badges57 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

H K Over a year ago

Then, how about the value from child componenet, I passed value from dialog to this parent component

Collectives™ on Stack Overflow

React looping component with map function, index is wrong

1 Answer 1

Edit in response to comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Edit in response to comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related