如何将子索引号传递给react组件？

Question

My Data looks like the below.

  const data = { main: { 88: { issues: [ { id: 1 }, { id: 3 }, { id: 4 } ] } } }; 

I am looping through data.main and then passing some data to the child component like this.

  {Object.values(data.main).map((key) => { <Issues id={key} issueIndex={XXX} {...this.props} /> } 

But I also want to pass an index of all issues to the child element. So that I can number it from here.

My attemp inside jsx file below.

  {Object.values(data.main).map((group, key) => { let issuesArr = group.issues; {issuesArr.map((value, index) => { index + 1; })} <Issue id={key} issueIndex={XXX} {...this.props} /> } 

I want to pass a number as issueIndex to the <Issue /> I have no control of the data structure.

Answer 1

That is happening because your issuesArr.map isn't doing anything. Change your code to this:

{
  Object.values(data.main).map((group, key) => {
    let issuesArr = group.issues;
    {
      issuesArr.map((value, index) => {
          return (
             <Issue
               id={key}
               issueIndex={value.id}
               {...this.props}
             />
          )
       }
    }
}