How to retrieve data from the server using fetch get method and show it in a table

Question

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 =>
        {
            return <TableRow key={person.id} data={person}/>
        });

        return (<div><div className="row float-right">
      <button className="nav-link btn btn-block btn-success" onClick={this.handleSubmit.bind(this)} >
       Add a new Beacon </button>
      
      
      </div><br/><br/>
      <div className="animated fadeIn">
            <br /><div className="card" style={{ width: 75 + '%' }}>
              <div className="card-header">
                <i className="fa fa-align-justify"></i> Manage Information
              </div>
              <div className="card-block">

      <table  className="table table-hover table-outline mb-0 hidden-sm-down">
            <thead className="thead-default">
        <tr>
            <th className="text-center">Name</th>
            <th className="text-center">Beacon</th>
            <th className="text-center">Edit Beacon</th>
        </tr>
        </thead>
                <tbody>{rows}</tbody>
            </table></div>
</div>
</div>
</div>
            );
    }
}

class TableRow extends React.Component
{
    constructor()
    {
        super();
    }

    render()
    {
        return (<tr>
                    <td className="text-center">{this.props.data.name}</td>
                    <td className="text-center">{this.props.data.beacon}</td>
                    <td className="text-center"><center><Link to={'/Components/EditBeacon'} style= {{ width: 40 + '%' }} className="nav-link btn btn-block btn-success" activeClassName="active">
       {this.props.data.button}</Link></center></td>
                </tr>
            );
    }
}


ReactDOM.render(
  <Beacons />,
  document.getElementById('root')
);

export default Beacons;

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

Answer 1

First of all you have an extra then chain in your Promise. So from your fetch call when Promise resolves successfully you can update your component state.

fetch('http://API_CAL')
 .then(data => this.setState({data}) , reason => console.error(reason));

Answer 2

Here is a quick example on how to use fetch for that purpose:

fetch(`https://www.reddit.com/r/dogs.json`)
.then(response => {
        return response.json();
})
.then(json => {
    // doSomeThing(json.someProperty)
    // this.setState({jsonData: json});
})
.catch((error) => {
    // AHHHH! An Error!
});

You have to grab the data out of the fetch response depending on what type of data you have (.json(), .blob(), etc...). Using Fetch

In the second .then() you can actually set your state, dispatch the payload to your store, or handle it in some way that your component will receive it. In the example above you would render whatever you get out of jsonData.