How to pass map indexes to array items compose of jsx element?

Question

I had this code where I could not pass the key index of the array item map.

arrayItem = [function1, function2, function3]

<div>
   {arrayItem.map((item, index) => (<Box key={index}>{item}</Box>}
</div>

ex. for function1

const function1 = (index) => { <div> <h1> test</h1> <Button onClick((index) => console.log(index,"array number")}

It seems that I could not retrieve the index from the map when it goes to function1. The index according the console in the map is numeric but when it goes to the function, it is a className {}. The purpose of this is to retrieve the number of the array so that I could put the button delete and delete the specific array according to the index. Btw, the arrayItems is not static, so it can have more than one functions.

Thanks for the help.

I tried this one => {arrayItem.map((item, index) => (<Box key={index}>{item(index)}</Box>))} it had an error, it says "Invariant Violation: Rendered more hooks than during the previous render." — William
– William, Commented Jan 21, 2021 at 5:48

Taghi Khavari · Accepted Answer · 2021-01-21 06:00:50Z

2

If you consider your items as just normal functions you can pass index as parameter to these function and then call them like this

<div>
   {arrayItem.map((item, index) => (<Box key={index}>{item(index)}</Box>))}
</div>

also you have some mistakes in your functions, you need to return some jsx from it. and you have a typo inonClick((.... try this:

const function1 = (index) => {
  return (
    <div>
      <h1> test</h1>
      <Button onClick={(index) => console.log(index, "array number")}>click me</Button>
    </div>
  );
};

There is another senario that you consider your arrayItem an array of React Function Component. in that case you need change your code to this and pass index as a prop:

<div>
   {arrayItem.map((FunctionComponent, index) => (<Box key={index}><FunctionComponent index={index} /></Box>))}
</div>

and then use the index like this:

const function1 = ({index}) => {
  return (
    <div>
      <h1> test</h1>
      <Button onClick={(index) => console.log(index, "array number")}>click me</Button>
    </div>
  );
};

edited Jan 21, 2021 at 6:00

answered Jan 21, 2021 at 5:26

Taghi Khavari

6,6173 gold badges21 silver badges36 bronze badges

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

2 Comments

William Over a year ago

It does not work, it had an error, it says rendered too many hooks. The arrayItem adding is a select textfield where everytime I will select any selections, it will just stockpile the array with jsx functions.

William Over a year ago

Thanks, I had the other scenario. it works.

Drew Reese · Accepted Answer · 2021-01-21 05:53:28Z

1

React keys are special and not treated as any part of props, similarly as-is with React refs. These are not exposed to the children components. If you need to pass an index` value to a child it needs to be passed as a prop.

arrayItem = [item1, item2, item3]

<div>
  {arrayItem.map((item, index) => (
    <Box
      key={index}
      index={index} // <-- pass as a valid prop
    >
      {item}
    </Box>
  )}
</div>

Seems you are wanting to receive the index as a prop, then it needs to be accessed from props.

const function1 = (props) => (
  <div>
    <h1>test</h1>
    <Button onClick(() => console.log(prop.index, "array number")
  ...
)

Now it seems that you have an array of functional components and you want to pass the index to that component. In this case you need to render it as JSX and not just as a passed function.

<div>
  {arrayItem.map((Component, index) => ( // <-- give proper PascalCased component name
    <Component
      key={index}
      index={index} // <-- pass as a valid prop
    />
  )}
</div>

edited Jan 21, 2021 at 5:53

answered Jan 21, 2021 at 5:50

Drew Reese

207k19 gold badges279 silver badges292 bronze badges

2 Comments

Taghi Khavari Over a year ago

Hi Drew if you want to treat them as component you need to use <item index={index} />

Drew Reese Over a year ago

@TaghiKhavari item isn't a valid React component.

Collectives™ on Stack Overflow

How to pass map indexes to array items compose of jsx element?

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related