title: How to render more elements of list on button click - Meteor / React
body: <p>I have a problem with rendering more items of list on button click. At the moment I render 3 items and on click I want to render another 3 items in place on previous ones.</p>
  
  <p>Let say user see three first items of the list (Medicines / Meals / Activities) and user wants to check another 3 when click on right-arrow button (currently commented Sleep / Cigarettes / Alcohol). I want to give possibility to render previous 3 on button with left arrow class and next 3 on button with right arrow class. I tried various stuff without resoult.</p>
  
  <pre><code>render () {
  const medicinesTaken = this.getMedicinesTaken()
  const mealsConsumed = this.getMealsConsumed()
  const activitiesMinutes = this.getActivitiesMinutes()
  const hoursSlept = this.getHoursSlept()
  const cigarettesSmoked = this.getCigarettesSmoked()
  const alcoholDrunk = this.getAlcoholDrunk()
  return (
    &lt;div&gt;
      &lt;button className='arrow-left' /&gt;
      &lt;ul className='list-icons list-inline'&gt;
        &lt;li className='calendar-icon'&gt;
          &lt;Medicines medicinesTaken={medicinesTaken} increment={this.incrementMedicines}
            decrement={this.decrementMedicines} /&gt;
        &lt;/li&gt;
        &lt;li className='calendar-icon'&gt;
          &lt;Meals mealsConsumed={mealsConsumed} increment={this.incrementMeals} decrement={this.decrementMeals} /&gt;
        &lt;/li&gt;
        &lt;li className='calendar-icon'&gt;
          &lt;Activities activitiesMinutes={activitiesMinutes} increment={this.incrementActivities}
            decrement={this.decrementActivities} /&gt;
        &lt;/li&gt;
        {/*&lt;li className='calendar-icon'&gt;*/}
          {/*&lt;Sleep hoursSlept={hoursSlept} increment={this.incrementSleep}*/}
            {/*decrement={this.decrementSleep} /&gt;*/}
        {/*&lt;/li&gt;*/}
        {/*&lt;li className='calendar-icon'&gt;*/}
          {/*&lt;Cigarettes cigarettesSmoked={cigarettesSmoked} increment={this.incrementCigarettes}*/}
            {/*decrement={this.decrementCigarettes} /&gt;*/}
        {/*&lt;/li&gt;*/}
        {/*&lt;li className='calendar-icon'&gt;*/}
          {/*&lt;Alcohol alcoholDrunk={alcoholDrunk} increment={this.incrementAlcohol}*/}
            {/*decrement={this.decrementAlcohol} /&gt;*/}
        {/*&lt;/li&gt;*/}
      &lt;/ul&gt;
      &lt;button className='arrow-right' /&gt;
    &lt;/div&gt;
  )
  </code></pre>
  
  <p>}
  How can I achieve it?</p>
  
  <p><a href="https://i.stack.imgur.com/jclui.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jclui.png" alt="enter image description here"></a></p>