Make the loop run after "return" statement. [React JS]

Aim: I want to render 64 <Square /> elements with <br/> after each 8 elements

Problem: The script outputs just one block and then stops and nothing more happens.

Source Code:

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'));

>Solution :

Using return statement will exit the function after first match, hence in first loop it exits and only displays 1st element, you need to use an array, store the elements in it, and then return the array.

Change your renderSquare method to following

renderSquare() {
    const items = [];
    for (let i = 1; i <= 64; i++) {
        if (i % 8 === 0) {
            items.push(<br />);
        } else {
            items.push(<Square />);
        }
    }
    return items;
}

Update

if you want to print 64 times then use the following

renderSquare() {
    const items = [];
    for (let i = 1; i <= 64; i++) {
        items.push(<Square />);
        if (i % 8 === 0) {
            items.push(<br />);
        }
    }
    return items;
}

Check this https://codesandbox.io/s/peaceful-brattain-pj32le?file=/src/App.js