title: Making an API call through external file and returning results React
body: <p>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.</p>
  
  <p>In a single file it worked fine but now I moved to separate files like this, it's not working...........</p>
  
  <p>UserDataTable</p>
  
  <pre><code>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 =&gt; ({
      Table: {
          margin: '10px'
      },
  });
  
  class UserDataTable extends Component {
      componentDidMount() {
          var config = { "Access-Control-Allow-Origin": "*" }
          getUserData(config, () =&gt; {
              // Success
              console.log();
          },(err) =&gt; {
              // Error
              alert(err);
          });
      }
  
      render() {
          const { classes } = this.props; 
  
          return (
              &lt;div&gt;
                  &lt;Paper className={classes.Table}&gt;
                      &lt;Table&gt;
                          &lt;TableHead className={classes.TableHeader}&gt;
                              &lt;TableRow&gt;
                                  &lt;TableCell&gt;Firm&lt;/TableCell&gt;
                                  &lt;TableCell&gt;Office&lt;/TableCell&gt;
                                  &lt;TableCell&gt;Sales Code&lt;/TableCell&gt;
                                  &lt;TableCell&gt;Account&lt;/TableCell&gt;
                              &lt;/TableRow&gt;
                          &lt;/TableHead&gt;
                          &lt;TableBody&gt;
                              &lt;TableRow&gt;
                                  &lt;TableCell&gt;1&lt;/TableCell&gt;
                                  &lt;TableCell&gt;2&lt;/TableCell&gt;
                                  &lt;TableCell&gt;3&lt;/TableCell&gt;
                                  &lt;TableCell&gt;4&lt;/TableCell&gt;
                              &lt;/TableRow&gt;
                              &lt;TableRow&gt;
                                  &lt;TableCell&gt;1&lt;/TableCell&gt;
                                  &lt;TableCell&gt;2&lt;/TableCell&gt;
                                  &lt;TableCell&gt;3&lt;/TableCell&gt;
                                  &lt;TableCell&gt;4&lt;/TableCell&gt;
                              &lt;/TableRow&gt;
                          &lt;/TableBody&gt;
                      &lt;/Table&gt;
                  &lt;/Paper&gt;
              &lt;/div&gt;
          )
      }
  }
  
  export default withStyles(styles)(UserDataTable);
  </code></pre>
  
  <p>getUserData API</p>
  
  <pre><code>import axios from 'axios';
  
  export function getUserData(config, errorcallback){
      axios.get('__LINK__', config)
      .then(response =&gt; {
        this.setState({
          isLoaded: true,
          items: response,
        })
      })
      .catch(err =&gt; {
        // catch error
        if(errorcallback != null){
           errorcallback(err);
        }
      })
  }
  </code></pre>