How to handle fetch with JavaScript in React

Question

I'm new with react and I'm trying to access the data of an API, I made two fetch to get the array values and a handler to print a console.log when you click in a row of one table. When I click in the table it shows me the id of the customer(this id the id I get with the get customer fetch) but when I tried to get into another value with getHistory fetch it prints me undefined.

Here are the fetches:

     getCustomers(){

        fetch(

            DOMAIN+'/api/customers/shop/'+this.props.salon, {
                method: 'get',
                dataType: 'json',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                    'Authorization':'Bearer '+this.props.token
                }
            })
            .then((response) =>
            {

                return response.json();
            })
            .then((responseData) => {
                responseData.map(function (v) {
                    v.platform = v.app ? v.app.platform : null  })
                this.setState({customers:responseData});
               //console.log(responseData);

            })
            .catch(function() {
                console.log("error");
            });
    }


 getHistory() {
        fetch(
            DOMAIN+'/api/orders/',{
                method: 'get',
                dataType: 'json',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                    'Authorization':'Bearer '+this.props.token
                }
            })
            .then((response) =>
            {

                return response.json();
            })
            .then((responseData) => {
                responseData.map(function (v) {
                    v.platform = v.app ? v.app.platform : null  })
                this.setState({orders:responseData});
                console.log(responseData);

            })
            .catch(function() {
                console.log("error");
            });

    }

Here is the handler:

 handleCellClick(y,x,row){
            //this.getHistory(this.state.orders);
    
            var ab= this.state.orders
            this.setState({
                open:true,
                slideIndex: 0,
                newForm:false,
                customer:{...row,_id:row._id},
                order:{...x,customer:x.customer}
    
            });
            this.getCustomers(row._id);
            this.getHistory(x.customer);
            console.log(row._id);
            console.log(x.customer);
    
        }

I get the row._id but the customer value returns me undefined,

Answer 1

You need to return the promise in the getHistory method and then chain the call to this method with a then clause.

getHistory() {
       return fetch(
            DOMAIN+'/api/orders/',{
                method: 'get',
                dataType: 'json',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                    'Authorization':'Bearer '+this.props.token
                }
            })
            .then((response) =>
            {

                return response.json();
            })
            .then((responseData) => {
                responseData.map(function (v) {
                    v.platform = v.app ? v.app.platform : null  })
                this.setState({orders:responseData});
                console.log(responseData);

            })
            .catch(function() {
                console.log("error");
            });

    }

then call it like so in the cell click handler function

 handleCellClick(y,x,row){
        //this.getHistory(this.state.orders);

        var ab= this.state.orders
        this.setState({
            open:true,
            slideIndex: 0,
            newForm:false,
            customer:{...row,_id:row._id},
            order:{...x,customer:x.customer}

        });
        this.getCustomers(row._id);

        this.getHistory(x.customer).then(response => console.log(response))  
        console.log(row._id);
        console.log(x.customer);

    }