title: It is something wrong in my logic to break lines in ReactJS
body: <p>I Have a goal to break lines in 4 to 4 link groups like that in the ReactJS dynamic HTML return:</p>
  
  <pre><code>&lt;a&gt;Content&lt;/a&gt;&lt;a&gt;Content&lt;/a&gt;&lt;a&gt;Content&lt;/a&gt;&lt;a&gt;Content&lt;/a&gt;&lt;br/&gt; 
  &lt;a&gt;Content&lt;/a&gt;&lt;a&gt;Content&lt;/a&gt;&lt;a&gt;Content&lt;/a&gt;&lt;a&gt;Content&lt;/a&gt;&lt;br/&gt; 
  &lt;a&gt;Content&lt;/a&gt;&lt;a&gt;Content&lt;/a&gt;&lt;a&gt;Content&lt;/a&gt;&lt;a&gt;Content&lt;/a&gt;&lt;br/&gt;  
  // again and again...
  </code></pre>
  
  <p>My logic is returning:</p>
  
  <pre><code>    // WRONG
      &lt;a&gt;Content&lt;/a&gt;&lt;br/&gt; 
      // OK
      &lt;a&gt;Content&lt;/a&gt;&lt;a&gt;Content&lt;/a&gt;&lt;a&gt;Content&lt;/a&gt;&lt;a&gt;Content&lt;/a&gt;&lt;br/&gt; 
      // WRONG
      &lt;a&gt;Content&lt;/a&gt;&lt;br/&gt; 
  </code></pre>
  
  <p>Here is the rendering of my ReactJS component:</p>
  
  <pre><code>render() {
      return (
        &lt;div&gt;         
          {this.state.interiores.map(item =&gt;
            &lt;div&gt;
              &lt;div className="gallery"&gt;
                {
                  item.fotos
                    .map((foto,index) =&gt; {
                      return (
                        &lt;React.Fragment&gt;
                          &lt;a href={`../images/${foto}.jpg`} className="big"&gt;
                            &lt;img src={`../images/${foto}_thumb.jpg`} alt="" /&gt;
                          &lt;/a&gt;
                          // Here is the logic
                          {index % 4 == 0 ? &lt;br /&gt; : ''}
                        &lt;/React.Fragment&gt;
                      )
                    })
                }
              &lt;/div&gt;
            &lt;/div&gt;
          )}
  }
  </code></pre>