CODEWITHSUNDEEP
reactjs
Sarah Sh
Sarah Sh

Reputation: 519

Activating 2 different calls on react onClick

I am facing the next scenario on my react component:

I have 2 buttons, which do pretty much the same except the fact that they fetch the data from different places.

The data is fetched from 2 different function on axios service class, but when returning from server, the same code should be executed (on then and catch methods).

How can I make that only the fetching will be a separate call, but the rest of the code will be the same?

axios file:

import axios from 'axios';

const ACCOUNT_API_BASE_URL = "http://localhost:8080/app";

class MyAxiosService {

    getAccount1(accountNumber) {
        
        return axios.post(ACCOUNT_API_BASE_URL + 'accounts', accountNumber);
    }

    getAccount2(accountNumber) {
        
        return axios.post(ACCOUNT_API_BASE_URL + 'findSecondWayAccount', accountNumber);
    }
}
export default new MyAxiosService()

Component:

import AccountService from '../services/AccountService'
import './web.css'
import Dropdown from 'react-dropdown'
import 'react-dropdown/style.css'
import React, { Component, useState } from 'react'
import { useSelector, useDispatch } from 'react-redux';
import { useAlert } from "react-alert";
import MyAxiosService from '../services/MyAxiosService';

const Example = (props) => {
    

    const onClick1 = (event) => {
        event.preventDefault();
        MyAxiosService.getAccount1(1111).then(res => {
            //common logic for both calls
        }).catch(error => {
           //common error handling for both calls
        });
    };

    const onClick2 = (event) => {
        event.preventDefault();
        MyAxiosService.getAccount2(1111).then(res => {
            //common logic for both calls
        }).catch(error => {
           //common error handling for both calls
        });
    };

    return (
        <form >
            <div>
               
                    <div class="float">
                        <input id='accountNumber' pattern="\d{4}" maxlength="8" name='accountNumber' for="accountNumber" required='required' placeholder="מספר חשבון" value={findAccountCriteria.accountNumber} onChange={onInputChange} />
                    </div>

                    <div class="float">
                        <input type="submit" value="find1" class="ui-button" id="a1" onClick={onClick1} />
                    </div>

                    <div class="float">
                        <input type="submit" value="find2" class="ui-button" id="a2" onClick={onClick2} />
                    </div>
             </div>
                <br />
        </form>
    );
};

export default Example

Upvotes: 0

Views: 56

Answers (2)

they call me wolf
they call me wolf

Reputation: 1

I'm kind of new to React, but have you tried something like this:

axios file:

import axios from 'axios';

const ACCOUNT_API_BASE_URL = "http://localhost:8080/app";

class MyAxiosService {
  
  getAccount(accountType, accountNumber) {
    return axios.post(ACCOUNT_API_BASE_URL + accountType, accountNumber);
  }
}
export default new MyAxiosService()

and the refactored part on component

const handleClick = useCallback((accountType, accountNumber) => {
  MyAxiosService.getAccount(accountType, accountNumber).then(res => {
      //common logic for both calls
  }).catch(error => {
     //common error handling for both calls
  });
}, []);

const onClick1 = (event) => {
  event.preventDefault();
  handleClick('accounts', 1111);
};

const onClick2 = (event) => {
  event.preventDefault();
  handleClick('findSecondWayAccount', 1111);
};

Hope this works for you, or at all, since I've not tested. :)

Upvotes: 0

kunal panchal
kunal panchal

Reputation: 798

You could do this.

 const onClickCommon = (event, accountType) => {
        event.preventDefault();
        MyAxiosService[accountType](1111).then(res => {
            //common logic for both calls
        }).catch(error => {
           //common error handling for both calls
        });
    };
    
    
 <Button onClick={e => this.onClickCommon(e, "getAccount1")}>

Upvotes: 1

Related Questions