how to create common helper class in React JS using ES6 which is used by another component?

Question

I am a new in react js, my problem is I want to create a class which will work as global helper which I want to utilzed in another class or component.

Use case for e.g First I want to fetch all resturant list keyword entered by user if user select any resturant then I want to get resturant details. in this use case I have to make two ajax call I want to create global ajax helper function which I can use in other components.

class AjaxHelperClass{

    ResturantAPI(url){

        $.ajax({
            url : url,
            success : function(res){}
        });

    }
}

    export default AjaxHelperClass;

in my another component that use from my AjaxHelperClass function :

import React from 'react';
import {render} from 'react-dom';
import {AjaxHelperClass} from "./module/AjaxHelperClass"

class App extends React.Component {

    constructor(props) {
        super(props);

      ///  AjaxHelperClass.ResturantAPI(); // or
    let myajaxresult= new AjaxHelperClass(url);

    }

    render () {
        return(
        <p> Hello React!</p>
        );
    }
}

render(<App/>, document.getElementById('app'));

Gerrit0 · Accepted Answer · 2020-06-01 02:31:38Z

27

Create a file called helpers.js

//helpers.js

export const AjaxHelper = (url) => {
    return (
      //ajax stuff here
    );
}

Then in your component:

import React from 'react';
import {render} from 'react-dom';
import {AjaxHelper} from "./path/to/helpers.js"

class App extends React.Component {

    constructor(props) {
        super(props);
        let myajaxresult = AjaxHelper(url);
    }

    render () {
        return(
        <p> Hello React!</p>
        );
    }
}

edited Jun 1, 2020 at 2:31

Gerrit0

9,3823 gold badges30 silver badges36 bronze badges

answered Jan 31, 2017 at 5:13

patrick

10.3k4 gold badges23 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

patrick Over a year ago

Nice one @nancy. You can also add additional helpers to the helpers.js and instead of exporting a default you add export in front of the const SomeFunction.

RenaissanceProgrammer Over a year ago

this is a class ?

Saurabh Bayani Over a year ago

@patrick, if AjaxHelper is a helper "method" then I think it should not start with the capital letter(as per convention). Also, what is your opinion on making HelperClass and then having "ajaxHelper" as a static method?

patrick Over a year ago

Yes agreed it could/should be camelCase. I don’t think having a class is necessary I prefer functional composition over inheritance where possible

Aylii Over a year ago

Seems like this may not be working anymore (at least for me), what worked was defining the function as such > export const AjaxHelper = () => {} instead of export default AjaxHelper at the bottom.

Saurabh Bayani · Accepted Answer · 2018-10-22 07:15:03Z

20

There is one more approach by wrapping it by a class rather than keeping all methods open and floating around utils.js

//utilsjs
default export class Utils {
    static utilMethod = (data) => {
        return (
          //methods stuff here
        );
    }
}

and then in your component

import React from 'react';
import {render} from 'react-dom';
import Utils from "./utils"

 class App extends React.Component {

    constructor(props) {
        super(props);
        let myData = {}; // any arguments of your
        Utils.utilMethod(myData);

    }

    render () {
        return(
        <p> Hello React!</p>
        );
    }
}

render(<App/>, document.getElementById('app'));

answered Oct 22, 2018 at 7:15

Saurabh Bayani

3,5902 gold badges27 silver badges44 bronze badges

4 Comments

Bogie Over a year ago

This is a very useful way to approach it, especially when you will have multiple functions (or ajax calls in the OP's case). Allows for concise calling of several helper functions throughout your app.

ralcazar Over a year ago

This is what I'm looking for. Why I didn't think of the static methods :). I will be working with HTML canvas inside ReactJS where I will be expecting a lot methods building up inside a single component and I don't want my component packed with too many methods.

Yogesh Over a year ago

What is the significance of using the static method here?

Travis Howell Over a year ago

If you're only using static methods, is there any reason to make the helper a class vs just a normal class?

Max Sindwani · Accepted Answer · 2017-01-31 05:12:37Z

8

The way that you've exported the class requires a new instance for each module you import it into. You can, instead, use a single instance as you've mentioned by exporting an instantiated AjaxHelperClass object rather than the class definition -- something like

export default new AjaxHelperClass();

This effectively gives you a global object. When importing the object, you can call its member functions i.e AjaxHelperClass.ResturantAPI();. Another option is to use static methods instead if all you want to use the class for is a namespace -- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/static

answered Jan 31, 2017 at 5:12

Max Sindwani

1,2677 silver badges15 bronze badges

Comments

Joshua Pinter · Accepted Answer · 2020-03-14 17:15:07Z

3

Another way you can do it that doesn't involve you having to import specific helper methods is just by exporting an Object in your helper file:

Helpers.js

export default { 

  connectToRestaurant: (url) => {

      $.ajax({
          url : url,
          success : function(res){}
      });

  },

  orderPizza: ( toppings = {} ) => {
    // Order a pizza with some sweet toppings.
  }

}

index.js

import Helpers from "Helpers";

Helpers.connectToRestaurant( "http://delicious.com/" );

Helpers.orderPizza( { cheese: true, pepperoni: true } );

I think there might be a package size penalty by not specifically including the functions from the modules, but the convenience factor, in my opinion, can often outweigh that penalty.

edited Mar 14, 2020 at 17:15

answered Oct 18, 2018 at 4:11

Joshua Pinter

47.9k23 gold badges261 silver badges258 bronze badges

Collectives™ on Stack Overflow

how to create common helper class in React JS using ES6 which is used by another component?

4 Answers 4

5 Comments

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related