In React js from App.js how to call another javascript file (service) method to consume API calls

Question

I am new to React js, I am trying to consume REST API results. So that I have written one separate file called /shared/job-service.js. From App.js I would like to call a method from job-service.js file and return these results to UI. Problem: I am unable to get the syntax to call the service js file method from the App.js file.

/shared/job-service.js

import React, {Component} from 'react';
import Jobs from './model/Jobs';

class JobService extends Component {
    render() {
        return (
            <Jobs jobs={this.state.jobs} />
        )
    }

    state = {
        jobs: []
    };

    componentDidMount() {
        fetch('http://localhost:8080/api/v1/job/')
            .then(res => res.json())
            .then((data) => {
                this.setState({ contacts: data })
            })
            .catch(console.log)
    }
}

export default JobService;

/src/App.js

import React from 'react';
import { Column, Row } from 'simple-flexbox';
import { StyleSheet, css } from 'aphrodite';
import SidebarComponent from './components/sidebar/SidebarComponent';
import HeaderComponent from './components/header/HeaderComponent';
import './App.css';

const styles = StyleSheet.create({
    container: {
        height: '100vh'
    },
    content: {
        marginTop: 54
    },
    mainBlock: {
        backgroundColor: '#F7F8FC',
        padding: 30
    }
});

class App extends React.Component {

    state = { selectedItem: 'Tickets' };

    render() {
        const { selectedItem } = this.state;
        return (
            <Row className={css(styles.container)}>
                <SidebarComponent selectedItem={selectedItem} onChange={(selectedItem) => this.setState({ selectedItem })} />
                <Column flexGrow={1} className={css(styles.mainBlock)}>
                    <HeaderComponent title={selectedItem} />
                    <div className={css(styles.content)}>
                        <span>Content....</span>
         //call the job-service.js file componentDidMount() method and return the result to the UI.
                    </div>
                </Column>
            </Row>
        );
    }
}

export default App;

I would like to know the syntax to call the method from another js file and consume the results. thanks in advance.

Answer 1

Move /shared/job-service.js into /src/service/job.js

Then, replace all the content on job.js by :

export function getJobs() {
  return fetch('http://localhost:8080/api/v1/job/')
    .then(res => res.json())
    .then((data) => data)
}

Of course, you can add a catch, async/await .. all what you want

After that, you have to make some changes on App.js, like this :

/src/App.js

import React from 'react';
import { Column, Row } from 'simple-flexbox';
import { StyleSheet, css } from 'aphrodite';
import SidebarComponent from './components/sidebar/SidebarComponent';
import HeaderComponent from './components/header/HeaderComponent';
import './App.css';

import { getJobs } from './service/job';

const styles = StyleSheet.create({
    container: {
        height: '100vh'
    },
    content: {
        marginTop: 54
    },
    mainBlock: {
        backgroundColor: '#F7F8FC',
        padding: 30
    }
});

class App extends React.Component {

    state = { selectedItem: 'Tickets', jobs: [] };

    componentDidMount() {
        getJobs()
        .then(data => {
            this.setState({
                jobs: data
            })
        });
    }

    render() {
        const { selectedItem } = this.state;
        return (
            <Row className={css(styles.container)}>
                <SidebarComponent selectedItem={selectedItem} onChange={(selectedItem) => this.setState({ selectedItem })} />
                <Column flexGrow={1} className={css(styles.mainBlock)}>
                    <HeaderComponent title={selectedItem} />
                    <div className={css(styles.content)}>
                        <span>Content....</span>
         //call the job-service.js file componentDidMount() method and return the result to the UI.
                    </div>
                </Column>
            </Row>
        );
    }
}

export default App;

And now you can map (Loop) this.state.jobs, in order to display jobs on Content Section