title: ReactJS How to add a show more/show less button
body: <p>I'm new to React and I want to add a simple "Show more" button to my Application. I have an array with data, where I want to show 3 entries as a default. When a user clicks on <code>show more</code>, the rest of the data should be rendered, and the Button should change the text to <code>show less</code>. I'm not exactly sure how to do it.</p>
  
  <p>This is what I got so far:</p>
  
  <pre><code>class Application extends React.Component {
    constructor() {
      super()
  
      this.cars = [
       { "name" : "Audi", "country" : "Germany"},
       { "name" : "BMW", "country" : "Germany" },
       { "name" : "Chevrolet", "country" : "USA" },
       { "name" : "Citroen", "country" : "France" },
       { "name" : "Hyundai", "country" : "South Korea" },
       { "name" : "Mercedes-Benz", "country" : "Germany" },
       { "name" : "Renault", "country" : "France" },
       { "name" : "Seat", "country" : "Spain" },
     ]
  
     this.isLoaded = false
  
    }
  
    showMore() {
     // show more entries
     // switch to "show less"
    }
  
    render() {
      return &lt;div className="container"&gt;
       &lt;h3&gt;Click show more to see more data&lt;/h3&gt;
       &lt;div className="row"&gt;
         &lt;h3&gt;List of Cars&lt;/h3&gt;
         &lt;ul&gt;
           {this.cars.slice(0,3).map((car, i) =&gt; &lt;li key={i}&gt;{car.name} - {car.country}&lt;/li&gt;)}
         &lt;/ul&gt;
       &lt;/div&gt;
       &lt;p&gt;
        &lt;a className="btn btn-primary" onClick={this.showMore()}&gt;Show more&lt;/a&gt;.
       &lt;/p&gt;
     &lt;/div&gt;;
    }
  }
  
  React.render(&lt;Application /&gt;, document.getElementById('app'));
  </code></pre>
  
  <p>Here is a <a href="http://jsbin.com/bomuqitixo/1/edit?html,js,output" rel="noreferrer">JSBin</a> with the code in action</p>
  
  <p>Can someone help me out?</p>