how to map a React component with different keys?

Question

I want to load components but it shows a problem that the components with the same key, but I mapped on selectedGroups and gave gr.id as a key it worked before the first version:

sharingTabs = selectedGroups.map(gr => (
        <ExpansionPanel>
          <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
            <Typography className={classes.heading}>{gr.name}</Typography>
          </ExpansionPanelSummary>
          <ExpansionPanelDetails>
            <Grid container spacing={16}>
              <Grid item xs>
                <SharingSpacesTabs />
              </Grid>
            </Grid>
          </ExpansionPanelDetails>
        </ExpansionPanel>
      ));

But then I wanted to send the index in a props that's why I added another map inside the map that's what caused the problem of call back function and I aded return

sharingTabs = selectedGroups.map(function(gr) {
        const indexs = groups.map((group, index) => {
          if ((group.sharingspace.element = gr.id)) {
            return index;
          }
        });
        return (
          <ExpansionPanel key={gr.id}>
            <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
              <Typography className={classes.heading}>{gr.name}</Typography>
            </ExpansionPanelSummary>
            <ExpansionPanelDetails>
              <Grid container spacing={16}>
                <Grid item xs>
                  <SharingSpacesTabs id={gr.id} index={indexs[0]} />
                </Grid>
              </Grid>
            </ExpansionPanelDetails>
          </ExpansionPanel>
        );
      });

Could you please help me find a solution I need it and thank you.

Show us the error

Gaspar
– Gaspar

2019-06-04 19:14:59 +00:00
Commented Jun 4, 2019 at 19:14 — Gaspar
– Gaspar, Commented Jun 4, 2019 at 19:14

Atul · Accepted Answer · 2019-06-04 19:17:23Z

1

I think you have problem in your condition, Change you function condition to properly check the equality with == or ===.

Also I am not sure what you want to do if the condition will not satisfied, map will return null for every element which does not satisfy the condition.

 const indexs = groups.map((group, index) => {
          if ((group.sharingspace.element == gr.id)) {
            return index;
          }
        });

answered Jun 4, 2019 at 19:17

Atul

3,4732 gold badges15 silver badges17 bronze badges

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

Comments

Brad Ball · Accepted Answer · 2019-06-04 19:14:54Z

0

the best way to do it is to pass a second index as a second parameter in map and make the key={index}

 sharingTabs = selectedGroups.map((gr, index) => {
  const indexes = groups.map((group, index) => {
    if ((group.sharingspace.element = gr.id)) {
      return index;
    }
  });
  return (
    <ExpansionPanel key={index}>
      <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
        <Typography className={classes.heading}>{gr.name}</Typography>
      </ExpansionPanelSummary>
      <ExpansionPanelDetails>
        <Grid container spacing={16}>
          <Grid item xs>
            <SharingSpacesTabs id={gr.id} index={indexes[0]} />
          </Grid>
        </Grid>
      </ExpansionPanelDetails>
    </ExpansionPanel>
  );
});

edited Jun 4, 2019 at 19:14

answered Jun 4, 2019 at 18:43

Brad Ball

6194 silver badges5 bronze badges

4 Comments

Zouari Moez Over a year ago

it didn't work it shows the same problem Warning: Encountered two children with the same key, xxxxxxxx. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future versio

Zouari Moez Over a year ago

But I need to take the index of groups in the props not the selectedgroups like it's shown in the second code that's why I added the second map

Brad Ball Over a year ago

Okay I just added that back try this

Zouari Moez Over a year ago

it's still the same problem Warning: Encountered two children with the same key,

Md. Rumon Khan · Accepted Answer · 2023-09-18 07:15:28Z

0

Don't use index as key it is not best way

Everyone should use for unique key key={Math.random()}

answered Sep 18, 2023 at 7:15

Md. Rumon Khan

1952 silver badges5 bronze badges

Collectives™ on Stack Overflow

how to map a React component with different keys?

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related