title: Dynamically created array by html objects - asynchronous
body: <p>I need to output an array of html objects. My function which handles output works asynchronously. I understand in async programming it can be that the last element is showed only of the loop.</p>
  
  <p>My tries was a wrapping the code into other closures but it outputs nothing.</p>
  
  <pre><code>let run = () =&gt; {
    let array1 = [];
    for (let j = 0; j &lt; 20; j++) {
      let children1 = [];
      for (let i = 0; i &lt; 20; i++) {
        for (var k = 0; k &lt; coordinate.length; k++) {
          let kk = k;
          setTimeout(function () {
            if (i === coordinate[kk].x &amp;&amp; j === coordinate[kk].y) {
              children1.push(&lt;Pool key={`${i}${j}`} row={`${square2}`}/&gt;);
            }
            else if(i===packageCoordinate.x &amp;&amp; j===packageCoordinate.y){
              children1.push(&lt;Pool key={`${i}${j}`} row={`${square3}`}/&gt;);
            }
            else{
              children1.push(&lt;Pool key={`${i}${j}`} row={`${square1}`}/&gt;);
            }
          }, 1000);
        }
      }
      array1.push(&lt;div key={`${j}`}&gt;{children1}&lt;/div&gt;);
    }
  };
  </code></pre>
  
  <p>In my opinion if else statemens aren't invoked properly.</p>
  
  <p>EDIT:
  I want to make if statement dynamically but k is always 0. And the secound issue I am getting error: </p>
  
  <blockquote>
    <p>Uncaught SyntaxError: Unexpected token c in JSON at position 0</p>
  </blockquote>
  
  <pre><code> export default class Board extends React.Component {
  
  constructor(props){
      super(props);
      let array=[];
      for(let j=0;j&lt;20;j++){
          let children=[];
          for(let i=0;i&lt;20;i++){
              children.push(&lt;Pool key={`${i}${j}`} row={`${square1}`}/&gt;);
          }   
      array.push(&lt;div key={`${j}`}&gt;{children}&lt;/div&gt;);     
      }
      this.state = {mainArray: array, indexArray: []}; 
  }
  
  renderMainArray(){
      return this.state.mainArray;
  }
  /////////////////////////////////////////////////////////////////
  stop = () =&gt; {
      alert("GAME OVER");
      window.location.reload("index.html");
  }
  run = () =&gt; {   
          let help="";
          let array1=[];
          for(let j=0;j&lt;20;j++){
  
              let children1=[];
              for(let i=0;i&lt;20;i++){                  
                  help="";
                  console.log(j);
                  for(let k=0;k&lt;coordinate.length;k++){
                      help+="coordinate[k].x===i &amp;&amp; coordinate[k].y===j ";
  
                      if(k!==coordinate.length-1){
                          help+="||";
                      }
                  }   
  
                      if(JSON.parse(help)){
                          children1.push(&lt;Pool key={`${i}${j}`} row={`${square2}`}/&gt;);
                      }   
                      else if(i===packageCoordinate.x &amp;&amp; j===packageCoordinate.y){
                          children1.push(&lt;Pool key={`${i}${j}`} row={`${square3}`}/&gt;);
                      }
                      else{
                          children1.push(&lt;Pool key={`${i}${j}`} row={`${square1}`}/&gt;);
                      }
                  }
              array1.push(&lt;div key={`${j}`}&gt;{children1}&lt;/div&gt;);
              }   
  
  
          /////////////////////////////////////////////////////////////////////////////////////////
          console.log(help);
          if(up===true){
          let help=Object.assign(coordinate[coordinate.length-1]);
              for(let i=0;i&lt;=coordinate.length-2;++i){
                  coordinate[i]=Object.assign({}, coordinate[i+1]);
              }
          help.x--;
          coordinate[coordinate.length-1]=Object.assign({}, help);
          }
  
          if(down===true){
          let help=Object.assign(coordinate[coordinate.length-1]);
              for(let i=0;i&lt;=coordinate.length-2;++i){
                  coordinate[i]=Object.assign({}, coordinate[i+1]);
              }
          help.x++;
          coordinate[coordinate.length-1]=Object.assign({}, help);
  
          }
  
          if(right===true){
          let help=Object.assign(coordinate[coordinate.length-1]);
              for(let i=0;i&lt;=coordinate.length-2;++i){
                  coordinate[i]=Object.assign({}, coordinate[i+1]);
              }
          help.y++;
          coordinate[coordinate.length-1]=Object.assign({}, help);
          }
  
          if(left===true){
              let help=Object.assign(coordinate[coordinate.length-1]);
              for(let i=0;i&lt;=coordinate.length-2;++i){
                  coordinate[i]=Object.assign({}, coordinate[i+1]);
              }
          help.y--;
          coordinate[coordinate.length-1]=Object.assign({}, help);
          }
  
          /////////////////////////////////////////////////////////////////////////////////////////
          if(coordinate[coordinate.length-1].x&gt;20 || coordinate[coordinate.length-1].x&lt;(-1) || coordinate[coordinate.length-1].y&gt;20 || coordinate[coordinate.length-1].y&lt;(-1) ){
              this.stop();
          }
          ////////////////////////////////////////////////////////////////////////////////////////
          this.setState({mainArray: array1});
  
      }
  ///////////////////////////////////////////////////
  
  
  render() {
      return (        
          &lt;div  className="main"&gt; 
          {this.renderMainArray()}
          &lt;button onClick={() =&gt; {setInterval(this.run, 1000);}}&gt;Start the game!&lt;/button&gt;
          &lt;/div&gt;
      );
  }
  </code></pre>
  
  <p>}</p>