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>;
      }
    }
  };
  ponentDidMount = () => {
    this.draw();
  };
  render() {
    return (
      <div>
        <h2>2048 Game With React</h2>
        <p>{this.draw()}</p>
      </div>
    );
  }
}

export default App;

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>;
      }
    }
  };
  ponentDidMount = () => {
    this.draw();
  };
  render() {
    return (
      <div>
        <h2>2048 Game With React</h2>
        <p>{this.draw()}</p>
      </div>
    );
  }
}

export default App;

• javascript
• arrays
• reactjs
• react-native
• react-router

• 3 The first return aborts the entire loop. – Code-Apprentice Commented Nov 13, 2019 at 20:35

6 Answers 6

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

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;
  };
  ponentDidMount = () => {
    this.draw();
  };
  render() {
    return (
      <div>
        <h2>2048 Game With React</h2>
        <p>{this.draw()}</p>
      </div>
    );
  }
}

export default App;

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.

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

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 ponentDidMount 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 ponents, instead of trying to return one ponent:

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 ponents 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;

It doesn't work because when you hit the first return in your for-statement, it will return it and skip the rest.

To work, you will have to return an array of jsx elements. Something like this:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    b: ['b','b','b','b','b','b','b','b','b','b']
    }
  }
  draw () {
    return this.state.b.map(elm=>{
        return <div>{elm}</div>;
    });

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

ReactDOM.render(<App />, document.querySelector("#app"))

try this !

draw = () => {
html = '';
for (let a = 0; a < 4; a++) {
  for (let b = 0; b < 4; b++) {
    html +='<div>'+a+'</div>';
  }
}
return html;
};