return index of array inside api array-CodePudding

I am trying to use the index number of an element in an array to show the number of the test for a corresponding score. I'm using a for loop, the issue is, when printed I get the index number of ALL the test scores from all objects.

let testIndex = [];

function testNum() {
  for (let i = 0; i < student.grades.length; i  ) {
    testIndex.push(i   1);
  };
  return testIndex;
}
return ({
  student.grades.map((grade) => {
    return (
      <div className = 'd-flex flex-column'>
        Test {testNum()}
        {student.grades.indexOf()   1}
        {grade}
      </div>
    )
  })
});

Here is my object:

{
  "students": [{
        "city": "Fush\u00eb-Muhurr",
        "company": "Yadel",
        "email": "[email protected]",
        "firstName": "Ingaberg",
        "grades": ["78", "100", "92", "86", "89", "88", "91", "87"],
        "id": "1",
        "lastName": "Orton",
        "skill": "Oracle"
      }, {
        "city": "Sanghan",
        "company": "Avamm",
        "email": "[email protected]",
        "firstName": "Clarke",
        "grades": ["75", "89", "95", "93", "99", "82", "89", "76"],
        "id": "2",
        "lastName": "Boards",
        "skill": "Sports"
      }, {
        "city": "Kugesi",
        "company": "Skalith",
        "email": "[email protected]",
        "firstName": "Laurens",
        "grades": ["88", "90", "79", "82", "81", "99", "94", "73"],
        "id": "3",
        "lastName": "Romanet",
        "skill": "Employee Handbooks"
      }
   ]
 };

I want it to print out as:

Test 1 78
Test 2 100
Test 3 92
// ... and so on

I figured using the index number would be the easiest way to do this?

what I'm getting with current code:

Test 1234567812345678123456781234567812345678123456781234567812345678: 0 78
Test 1234567812345678123456781234567812345678123456781234567812345678: 0 100
Test 1234567812345678123456781234567812345678123456781234567812345678: 0 92
Test 1234567812345678123456781234567812345678123456781234567812345678: 0 86

CodePudding user response：

You will get the current index as the second argument of map, so you can use that.

{student.grades.map((grade, index) => {
        return (
          <div className='d-flex flex-column'>Test {index   1} {grade}</div>
        )
      })}
)