title: Formula to dynamically calculate .slice() - Javascript
body: <p>I would like to dynamically render array elements into specified number of columns.</p>
  <p>Given an array <code>const sessions = [10, 10, 5]</code> and <code>const trials = [1, 2, 3, ..., 25]</code> where sessions.length is the number of columns and trials is the data.</p>
  <pre><code>    &lt;div class=&quot;column-1&quot;&gt;
        {
            trials.slice(0, 10).map(t =&gt; {
              return &lt;p&gt;{t} seconds&lt;/p&gt;
            }
        }
      &lt;/div&gt;
      &lt;div class=&quot;column-2&quot;&gt;
        {
            trials.slice(10, 20).map(t =&gt; {
              return &lt;p&gt;{t} seconds&lt;/p&gt;
            }
        }
      &lt;/div&gt;
      &lt;div class=&quot;column-3&quot;&gt;
        {
            trials.slice(20, 25).map(t =&gt; {
              return &lt;p&gt;{t} seconds&lt;/p&gt;
            }
        }
      &lt;/div&gt;
  </code></pre>
  <p>In column 1, I would display the first 10 elements in <code>trials</code> because <code>sessions[0] = 10</code>. In column 2, I would display the next 10 elements in <code>trials</code> because <code>sessions[1] = 10</code>, and finally the next 5 items because <code>sessions[2] = 5</code>.</p>
  <p>My ideal solution would be using something like this where I need to figure out how to calculate <code>x</code> and <code>y</code> based on <code>sessions</code>:</p>
  <pre><code>sessions.map((s, idx) =&gt; {
      &lt;div class=`column-${idx+1}`&gt;
        {
            trials.slice(x, y).map(t =&gt; {
              return &lt;p&gt;{t} seconds&lt;/p&gt;
            }
        }
      &lt;/div&gt;
  }
  </code></pre>