Fetch API not working with Rails + React from Webpacker

Question

how to get work Fetch API with Rails and React.

Setup: Rails 5, Sprockets and React from Webpacker.

What I'm trying to achieve here is use Fetch API to fetch and load data to ReactBootstrapTable API.

import React from 'react';
import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table';
import 'whatwg-fetch'

class ExampleTable extends React.Component {
  
  constructor() {
    super();
    this.state = {
      datatable: [], // I'm not sure if I can use array to json data.
    };
  } 
  
  // I'm new to React, so I'm not sure if I'm passing props right  
  componentDidMount() {
    console.log('start componentDidMount');
    fetch('https://www.test.com/test.json')
    .then(function(response) {
      return response.json();
    }).then(function(response) {
        let datatable = response;
        this.setStates({ datatable });
    }).catch(function(ex) {
      console.log('parsing failed', ex);
    });
  }
  
  render() {
    return (
      <div>
        <BootstrapTable
          data={this.states.datatable} //Here, I'm passing data to the table
          pagination
          striped hover condensed
          options={ { noDataText: 'Empty Table' } }>
          
          <TableHeaderColumn isKey dataField='id' width='80px' dataAlign='center'>
            ID
          </TableHeaderColumn>
          <TableHeaderColumn dataField='test'width='300px' dataAlign='left'>
            Test
          </TableHeaderColumn>
        </BootstrapTable>
      </div>
    );
  }
}
 
export default ExampleTable;

The main problem here is that I'm not able to use Fetch API and also I'm not totally sure about the way I'm passing data to the table (basically how to use react)

I'm getting a error/warning from my IDE

fetch is not defined

And another error message from the Firefox console:

The above error occurred in the component: in ExampleTable

TypeError: this.states is undefined

I installed the Fetch API through yarn and checked the node_modules/whatwg-fetch folder. As described from the github API, I imported 'whatwg-fetch' as showed in the code above.

I don't know what else I should do. I installed ReactBoostrapTable in the same way and got succeeded doing it. Everything else is working fine.

Derek Hopper · Accepted Answer · 2017-12-21 19:00:09Z

1

I looked at the installation instructions of fetch for use with webpack, it says to add this to your webpack configuration:

entry: ['whatwg-fetch', ...]

Also, you mentioned the other error TypeError: this.states is undefined. It looks like you have a typo. In React, if you're trying to refer to state, you use it like this:

this.state.datatable

In your render method, you refer to this.states.

Also, when you're making your call with fetch, you're trying to call this.setStates. You should instead be using it like this:

this.setState({ somestate: "xyz"})

answered Dec 21, 2017 at 19:00

Derek Hopper

2,25814 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pedro Gabriel Lima Over a year ago

Thanks for seeing the typos! haha Fixing these gives me another error message in the console, but it seems now that the compile is reaching the fetch method! It's a progress hehe. About the installation instructions, I think it wouldn't work because what I using is Webpacker and not Webpack.

Collectives™ on Stack Overflow

Fetch API not working with Rails + React from Webpacker

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related