0

Estou tentando fazer uma tabela , 5 de altura por 7 largura , dentro do react , porém , quando eu tentou rodar o 2° for loop ele não reconhece e acaba não fazendo a ação , obg pela ajuda 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>
);
}
1
  • não entendi sua pergunta!
    – novic
    Commented 19/09/2020 às 0:49

1 Resposta 1

1

Componentes do React não são strings HTML, como se faria num jQuery da vida. Você deve usar map sempre que for fazer uma lista de componentes de tamanho arbitrário.

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>

3
  • 1
    Rodrigo nos temos em nosso site como renderizar componentes REACT, fiz a edição e coloquei como exemplo, apesar que poderia ter montado um estado nesse componente, fazer assim solto pode trazer problemas futuros.
    – novic
    Commented 19/09/2020 às 23:19
  • muito obrigado , mas ainda tenho uma duvida.Se nós colocarmos as chaves entre os elementos do JSX ele ira executar o código como javascript, certo? .Então , por que se eu colocar o for..loop dentro das chaves ele não executa ?Sendo que eu consigo chamar variaveis e fazer até expressões simples como 3 + 7 Commented 20/09/2020 às 14:31
  • Dentro das chaves é permitido colocar apenas uma expressão que resulta num valor, algo que poderia ser atribuído a uma variável antes do "return". Uma variável não pode ser igual a um loop. Também é permitido usar os métodos .reduce ou .filter, por exemplo. Commented 20/09/2020 às 16:05

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .