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

Question

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

that's what return does - it returns a value from a function - your attempt would only output 56 <Square> even if you could return like that anyway — Bravo
– Bravo, Commented Apr 6, 2022 at 4:30

Ibrahim Azhar Armar · Accepted Answer · 2022-04-06 04:39:54Z

1

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

edited Apr 6, 2022 at 4:39

answered Apr 6, 2022 at 4:35

Ibrahim Azhar Armar

25.8k36 gold badges136 silver badges213 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

zmag Over a year ago

this code still has an logical error that <Square /> doesn't appear 64 times.

Ibrahim Azhar Armar Over a year ago

Updated the code to print <Square> 64 times

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related