title: How to retrieve data from the server using fetch get method and show it in a table
body: <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>import React, { Component } from 'react';
  import ReactDOM from 'react-dom';
  
  import { Link } from 'react-router'
  
  class Beacons extends Component {
  
    constructor() 
      {
          super();
          console.log("componentDidMount running");
          this.state = {
              data:[
                  {name:"Nikko Laus1" , beacon:"" ,button:"Edit Beacon"},
                  {name:"Sam Collins", beacon:"",button:"Edit Beacon"},
                  {name:"Carl Smith Wesson", beacon:"",button:"Edit Beacon"},
                  {name:"Peter Austin", beacon:"",button:"Edit Beacon"},
                  {name:"Peter Austin", beacon:"",button:"Edit Beacon"},
                  {name:"Tini Titus", beacon:"",button:"Edit Beacon"},
                  {name:"Sarra Cams", beacon:"",button:"Edit Beacon"}    
              ]
          };
  
         fetch("http://api-env.bt2qjip33m.ap-south-1.elasticbeanstalk.com/api/v1/beacons",{ 
       headers: { 
       'Accept': 'application/json, application/xml, text/plain, text/html, *.*', 
  
       'Content-Type': 'application/json' 
       }, 
       method : 'GET'
       }) 
       .then(function(response) { 
       console.log("response") 
       console.log(response) 
       return response.json(); 
       }) 
       .then(function(data) { 
       console.log("data") 
       console.log(data) 
       }) 
       .catch(function(error){ 
       console.log("error") 
       console.log(error)   
       });
       
      }
  
      componentDidMount(){
        console.log("hello");
      }
  
  static contextTypes = {
    router: React.PropTypes.object.isRequired
  }
  handleSubmit(event){
  
      this.context.router.push('/components/NewBeacon');
    }
  
  
  
    render() {
      
          let rows = this.state.data.map(person =&gt;
          {
              return &lt;TableRow key={person.id} data={person}/&gt;
          });
  
          return (&lt;div&gt;&lt;div className="row float-right"&gt;
        &lt;button className="nav-link btn btn-block btn-success" onClick={this.handleSubmit.bind(this)} &gt;
         Add a new Beacon &lt;/button&gt;
        
        
        &lt;/div&gt;&lt;br/&gt;&lt;br/&gt;
        &lt;div className="animated fadeIn"&gt;
              &lt;br /&gt;&lt;div className="card" style={{ width: 75 + '%' }}&gt;
                &lt;div className="card-header"&gt;
                  &lt;i className="fa fa-align-justify"&gt;&lt;/i&gt; Manage Information
                &lt;/div&gt;
                &lt;div className="card-block"&gt;
  
        &lt;table  className="table table-hover table-outline mb-0 hidden-sm-down"&gt;
              &lt;thead className="thead-default"&gt;
          &lt;tr&gt;
              &lt;th className="text-center"&gt;Name&lt;/th&gt;
              &lt;th className="text-center"&gt;Beacon&lt;/th&gt;
              &lt;th className="text-center"&gt;Edit Beacon&lt;/th&gt;
          &lt;/tr&gt;
          &lt;/thead&gt;
                  &lt;tbody&gt;{rows}&lt;/tbody&gt;
              &lt;/table&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
              );
      }
  }
  
  class TableRow extends React.Component
  {
      constructor()
      {
          super();
      }
  
      render()
      {
          return (&lt;tr&gt;
                      &lt;td className="text-center"&gt;{this.props.data.name}&lt;/td&gt;
                      &lt;td className="text-center"&gt;{this.props.data.beacon}&lt;/td&gt;
                      &lt;td className="text-center"&gt;&lt;center&gt;&lt;Link to={'/Components/EditBeacon'} style= {{ width: 40 + '%' }} className="nav-link btn btn-block btn-success" activeClassName="active"&gt;
         {this.props.data.button}&lt;/Link&gt;&lt;/center&gt;&lt;/td&gt;
                  &lt;/tr&gt;
              );
      }
  }
  
  
  ReactDOM.render(
    &lt;Beacons /&gt;,
    document.getElementById('root')
  );
  
  export default Beacons;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I had made a table on this page
  Now i want to hit the api and the results fetched from that api are to be shown in the table being made on this page
  API to be hit by Fetch api calls using get method and its result to be shown in the tabular form</p>