Is it possible to print 16 times in React

Question

I'm making an application. As an example, I tried to print the letter 'a' 16 times in the following code. But it didn't work. This is because I do use 'return'. I know that. But it does not use error. How do I print the letter 'a' 16 times?

import React from "react";
import Game from "./game";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.Game = new Game();
    console.log(this.Game.play());
  }
  draw = () => {
    for (let a = 0; a < 4; a++) {
      for (let b = 0; b < 4; b++) {
        return <div>a</div>;
      }
    }
  };
  componentDidMount = () => {
    this.draw();
  };
  render() {
    return (
      <div>
        <h2>2048 Game With React</h2>
        <p>{this.draw()}</p>
      </div>
    );
  }
}

export default App;

Answer 1

You should just us an array. Populate the array and then return it and React will render the array of components.

import React from "react";
import Game from "./game";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.Game = new Game();
    console.log(this.Game.play());
  }
  draw = () => {
    let result = [];
    for (let a = 0; a < 4; a++) {
      for (let b = 0; b < 4; b++) {
        result.push(<div>a</div>);
      }
    }
    return result;
  };
  componentDidMount = () => {
    this.draw();
  };
  render() {
    return (
      <div>
        <h2>2048 Game With React</h2>
        <p>{this.draw()}</p>
      </div>
    );
  }
}

export default App;

Answer 2

The return aborts the entire loop so that you only get one <div>. You need to build up all of the <div>s and return either an array of <div> elements or a single <div> element with the 16 <div>s nested inside.

Answer 3

You need to use fill method from Array prototype, so you could do this in your render method

  render() {
    return (
      <div>
        <h2>2048 Game With React</h2>
        <p>{Array(16).fill("a").map((letter, index) => <div key={index}>{letter}</div>)}</p>
      </div>
    );
  }

Answer 4

You do not need to explicitly call a draw method, because the render method would take that roll. This method gets called automatically when the props object changes. So you would not need to call it with componentDidMount you can just leave it inside of the render method as you have it, since this.draw() will be called every time render() is called automatically.

Getting to your core question: your this.draw method would always return <div>a</div> because you are putting the return statement inside of your double for loop and therefore would always return when it hits that line (and will not keep looping).

As a start, you would want to make an array of components, instead of trying to return one component:

draw = () => {
  let output = [];
  for (let a = 0; a < 4; a++) {
    for (let b = 0; b < 4; b++) {
      output.push(<div>a</div>);
    }
  }
  return output;
};

Since you seem to be making a game, this would not quite work the way you might want. I imagine you are trying to make a grid since you are using 2 for loops. You would need to either define this in a table, or use components that support a grid format.

So to answer your main question, if you are trying to print out 'a' 16 times, you would want to revise to something like this:

import React from "react";
import Game from "./game";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.Game = new Game();
    console.log(this.Game.play());
  }

  draw = () => {
    let output = [];
    for (let a = 0; a < 4; a++) {
      for (let b = 0; b < 4; b++) {
        output.push(<div>a</div>);
      }
    }
    return output;
  };

  render() {
    return (
      <div>
        <h2>2048 Game With React</h2>
        <p>{this.draw()}</p>
      </div>
    );
  }
}

export default App;