how to make React render a table

Question

I’m trying to make a table , 5 tall by 7 wide , inside the React , however, when I tried to run the 2° for loop he does not recognize and ends up not doing the action , obg by help S2

function Principal(){

var altura = 5;
var largura = 7;
const desing = [];

for(var i ; i < altura ; i++){
  desing.push(<tr>);
  for(var a ; a , largura ; a++){
      desing.push(<td>"a"</td>)
  }
  desing.push(</tr>);
}
return(
  <div id='calendario'>
   {desing}
  </div>
);
}

Answer 1

React components are not HTML strings, as you would in a jQuery of life. You must use map whenever making a list of components of arbitrary size.

function Principal() {
  const altura = 5;
  const largura = 7;

  // cria Array de 0 até n - 1:
  const linhas = Array.from(Array(altura).keys());
  const colunas = Array.from(Array(largura).keys());

  return (
    <div id="calendario">
      <table>
        <tbody>
          {linhas.map((linha) => (
            <tr key={linha}>
              {colunas.map((coluna) => (
                <td
                  key={coluna}
                  style={{ border: "solid #ccc" }}
                >{`(${linha}, ${coluna})`}</td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

ReactDOM.render( <Principal/> , document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root">Carregando ...</div>