title: In React, how to show data from API in a HTML table?
body: <p>I'm trying to display data from my example API. At the moment I'm able to loop through the array, and display all the titles, for example:</p>
  
  <pre><code>EventTitle1
  EventTitle2
  EventTitle3
  ...
  </code></pre>
  
  <p>Here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class App extends React.Component {
  constructor() {
     super();
     this.state = {
        data: []
     }
  }
   
  componentDidMount() {
   var th = this;
   this.serverRequest = axios.get(this.props.source)
   .then(function(event) { 
       th.setState({
           data: event.data
       });
   })
  }
  
  componentWillUnmount() {
    this.serverRequest.abort();
  }
   
  render() {
   var titles = []
   this.state.data.forEach(item =&gt; {
      titles.push(&lt;h3 className=”events”&gt;{item.title[0].value}&lt;/h3&gt; );
   })
   return (
      &lt;div className=”container”&gt;
        &lt;div className=”row”&gt;
           &lt;div className=”col-md-6 col-md-offset-5"&gt;
               &lt;h1 className=”title”&gt;All Events&lt;/h1&gt;
               {titles} 
           &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
   } 
  }
  
  ReactDOM.render(
     &lt;App source=”http://localhost:8888/example/api/events" /&gt;, 
     document.getElementById(‘container’)
  );</code></pre>
  </div>
  </div>
  </p>
  
  <p>How could I create an HTML table, to display only the five latest event titles from the API (and later other data) inside the table?</p>
  
  <p>For example: </p>
  
  <pre><code>return (
      &lt;table&gt;
        &lt;tr&gt;
          &lt;th&gt;Event title&lt;/th&gt;
          &lt;th&gt;Event location&lt;/th&gt; 
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;First event title {titles[0]} ?? &lt;/td&gt; 
          &lt;td&gt;San Fran&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;Second event title {titles[1]} ??&lt;/td&gt; 
          &lt;td&gt;London&lt;/td&gt; 
        &lt;/tr&gt;
      &lt;/table&gt;
  );
  </code></pre>