Populate index value in column from the data in typescript(Angular/React)

Question

I have the below array. I tried to populate in table below format.First field is ranking then player name should one by one from zero the array.

0:Array(3)
    0:{fullname:'john'}
    1:{fullname:'kennedy'}
    2:{fullname:'sachin'}
1:Array(3)
    0:{fullname:'dravid'}
    1:{fullname:'dhoni'}
    2:{fullname:'kohli'}
2:Array(3)
    0:{fullname:'mcrath'}
    1:{fullname:'murali'}
    2:{fullname:'dinesh'}

My code is below.it is not working. Ranking column not showing correctly Ranking column should auto increment from 1 .

 {this.props.data.map((row, index) => { 
     return ( 
          <tr>
               {row.map((col, colIndex) => { 
                     return (  
                         <td> {col.index} </td> 
                         <td> {col.fullname} </td> 
                     )
                 })}
          </tr>
      ) 
 })}

Answer 1

您应该使用外部地图的index并且由于索引以0开头，因此您应该根据需要添加 1：

<td> {index+1} </td> 

Answer 2

Try this

this.props.data.map((row, index) => (
    <tr key={index}>
        <td> {index + 1} </td>
        {row.map((col, colIndex) => (
            <td key={colIndex}> {col.fullname} </td>
        ))}
    </tr>
));