Objetivo: quiero renderizar 64 elementos <Square /> con <br/> después de cada 8 elementos
Problema: el script genera solo un bloque y luego se detiene y no sucede nada más.
Código fuente:
import React from 'react'; import ReactDOM from 'react-dom'; import './style.css'; class Square extends React.Component { render() { return <div id="block"></div>; } } class Board extends React.Component { renderSquare() { for (let i = 1; i <= 64; i++) { if (i % 8 == 0) { return <br />; } else { return <Square />; } } } render() { return <div>{this.renderSquare()}</div>; } } function Game() { return ( <div id="board"> <Board /> </div> ); } ReactDOM.render(<Game />, document.getElementById('root'));El uso de la declaración de devolución saldrá de la función después de la primera coincidencia, por lo tanto, en el primer ciclo sale y solo muestra el primer elemento, debe usar una matriz, almacenar los elementos en ella y luego devolver la matriz.
Cambie su método renderSquare a seguir
renderSquare() { const items = []; for (let i = 1; i <= 64; i++) { if (i % 8 === 0) { items.push(<br />); } else { items.push(<Square />); } } return items; }Actualizar
si desea imprimir 64 veces, utilice lo siguiente
renderSquare() { const items = []; for (let i = 1; i <= 64; i++) { items.push(<Square />); if (i % 8 === 0) { items.push(<br />); } } return items; }Mira esto https://codesandbox.io/s/peaceful-brattain-pj32le?file=/src/App.js