Making an API call through external file and returning results React

Question

I am trying to make an API call through a separate file, and return results along with status like, displaying loading text until data is retrieved and being displayed.

In a single file it worked fine but now I moved to separate files like this, it's not working...........

UserDataTable

import React, { Component } from 'react';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
import { withStyles } from '@material-ui/core/styles';
import { getUserData } from './APIcalls/UserSearch.js';

// Styles
const styles = theme => ({
    Table: {
        margin: '10px'
    },
});

class UserDataTable extends Component {
    componentDidMount() {
        var config = { "Access-Control-Allow-Origin": "*" }
        getUserData(config, () => {
            // Success
            console.log();
        },(err) => {
            // Error
            alert(err);
        });
    }

    render() {
        const { classes } = this.props; 

        return (
            <div>
                <Paper className={classes.Table}>
                    <Table>
                        <TableHead className={classes.TableHeader}>
                            <TableRow>
                                <TableCell>Firm</TableCell>
                                <TableCell>Office</TableCell>
                                <TableCell>Sales Code</TableCell>
                                <TableCell>Account</TableCell>
                            </TableRow>
                        </TableHead>
                        <TableBody>
                            <TableRow>
                                <TableCell>1</TableCell>
                                <TableCell>2</TableCell>
                                <TableCell>3</TableCell>
                                <TableCell>4</TableCell>
                            </TableRow>
                            <TableRow>
                                <TableCell>1</TableCell>
                                <TableCell>2</TableCell>
                                <TableCell>3</TableCell>
                                <TableCell>4</TableCell>
                            </TableRow>
                        </TableBody>
                    </Table>
                </Paper>
            </div>
        )
    }
}

export default withStyles(styles)(UserDataTable);

getUserData API

import axios from 'axios';

export function getUserData(config, errorcallback){
    axios.get('__LINK__', config)
    .then(response => {
      this.setState({
        isLoaded: true,
        items: response,
      })
    })
    .catch(err => {
      // catch error
      if(errorcallback != null){
         errorcallback(err);
      }
    })
}

Ganapati V S · Accepted Answer · 2019-01-22 16:33:16Z

2

This should fix your issue.

        // Rest of the class code
        getUserData(config, (response) => {
            // Success
            this.setState({
              isLoaded: true,
              items: response,
            });
        },(err) => {
            // Error
            alert(err);
        });
        // Rest of the class code

import axios from 'axios';

export function getUserData(config, successcallback, errorcallback){
    axios.get('__LINK__', config)
    .then(response => {
      if(successcallback != null){
         successcallback(response);
      }
    })
    .catch(err => {
      // catch error
      if(errorcallback != null){
         errorcallback(err);
      }
    })
}

answered Jan 22, 2019 at 16:33

Ganapati V S

1,6811 gold badge13 silver badges23 bronze badges

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

2 Comments

Peace Over a year ago

you answered so quick, system didn't allow me to accept until question was 5 minutes old, haha

Ganapati V S Over a year ago

Hehe, thats interesting 😂

Umair Farooq · Accepted Answer · 2019-01-22 16:47:19Z

1

When you are calling function you are sending three arguments config, successCallback and errorCallback but in the function you are accepting two arguments. Function should be:

export function getUserData(config, successCallback, errorCallback){

You should not call setState in API function, successCallback should set the state. Api function should be independent

answered Jan 22, 2019 at 16:47

Umair Farooq

1,8331 gold badge14 silver badges17 bronze badges

Collectives™ on Stack Overflow

Making an API call through external file and returning results React

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related