CODEWITHSUNDEEP
javascriptreactjsloopsindexingecmascript-6
Zena Mesfin
Zena Mesfin

Reputation: 421

How do I pass children index number to a react component?

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.

Upvotes: 1

Views: 3944

Answers (1)

Vishal Sharma
Vishal Sharma

Reputation: 2610

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}
             />
          )
       }
    }
}

Upvotes: 3

Related Questions