how to create common helper class in React JS using ES6 which is used by another component?
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