How to make utility class or functional component to expose few common utility methods

Question

I am new to ReactJs. I have good knowledge of other OOP languages such as Java, C++, etc. That is why I am trying to find similarities between OOP and ReactJs. As we always do in Java, we make a static utility class to expose few common functionalities which are used all over the application.

How do I do it in ReactJs? My scenario is like I have few CURD methods done by Axios in Reactjs which communicates with the database. I need all CURD methods in several components. So I would like to make CurdApi.js and put all the common CURD there. Later I call them from other components. Is it possible to do in Reactjs? My possible curd API's are like:-

function postPhoto(selectedFile)
function postData(data)
function photo getPhoto()
function data getData()

Those are a hypothetical CURD that may not correct ReactJs syntax. I want to add them to a utility class or functional component to reuse all over the ReactJs App. Is there any way to do it?

score 2 · Accepted Answer · answered Feb 29 '20 at 10:15

You can definitely add them to a js file and have them imported to the component you want. You can have your methods as static like this.

export default class MyUtility {
    static postPhoto(selectedFile) {
        return true;
    }

    static postData(data) {
        return true;
    }

    static getPhoto() {
        return photo;
    }

    static getData() {
        return data;
    }
}

And use them in the component:

import MyUtility from '../../Common/myUtility';

let result = MyUtility.postPhoto(mySelectedFile);

How to make utility class or functional component to expose few common utility methods

1 Answers1