map to render grid in react

Question

What are the different values that row and ri take in the code in the return part of the code and how does that help in rendering.I have a very vague idea of how to deal with a map when it comes to a matrix where things works in 2d ways . Here is the code for the component.

class Game extends React.Component{
  render(){
     let matrix=[];
     let row;
     for(var i=0;i<this.props.rows;i++){
       row=[];
       for(var j=0;j<this.props.columns;j++){
         row.push(`${i}${j}`)
       }
       matrix.push(row);
     }
     return(
       <div className="grid">

       {
         matrix.map((row, ri) => (

          <Row key={ri}>
          {row.map(cellId => <Cell key={cellId} id={cellId} />)}
           </Row>
          ))
        }

       </div>

     );
}
}

Answer 1

如果您正在寻找实施标准的html表格 map函数中的第二个参数（代码中的ri）是索引。只要您不删除数据，它就可以用作密钥。如果您需要操纵数据，那么它不是合适的密钥。

如果您确定每行中的第1列是唯一的，则可以使用row[0]作为键 这是一个例子：

const data = [
  [1,2,3],
  [4,5,6],
  [7,8,9],
];

class Game extends React.Component {
  render() {
    return (
      <table>
        {
          data.map((row, index) => (
            <tr key={row[0]}>
              {row.map(cellId => <th key={cellId}>{cellId}</th>)}
            </tr>
          ))
        }
      </table>
    );
  }
}

有代码演示：