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'));
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>
);
}
}
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'));
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