Quick note: You are importing a class, you can't call properties on a class unless they are static properties. Read more about classes here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes
There's an easy way to do this, though. If you are making helper functions, you should instead make a file that exports functions like this:
export function HelloChandu() {
}
export function HelloTester() {
}
Then import them like so:
import { HelloChandu } from './helpers'
or...
import functions from './helpers'
then
functions.HelloChandu
Quick note: You are importing a class, you can't call properties on a class unless they are static properties. Read more about classes here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes
There's an easy way to do this, though. If you are making helper functions, you should instead make a file that exports functions like this:
export function HelloChandu() {
}
export function HelloTester() {
}
Then import them like so:
import { HelloChandu } from './helpers'
or...
import functions from './helpers'
then
functions.HelloChandu
An alternative is to create a helper file where you have a const object with functions as properties of the object. This way you only export and import one object.
helpers.js
const helpers = {
helper1: function(){
},
helper2: function(param1){
},
helper3: function(param1, param2){
}
}
export default helpers;
Then, import like this:
import helpers from './helpers';
and use like this:
helpers.helper1();
helpers.helper2('value1');
helpers.helper3('value1', 'value2');
Videos
What are the benefits of using helper functions in React?
How to create reusable helper functions in React?
Hi,
I have small functions which I would like to use it across multiple components, where you guys put these kind of stuff? it's probably "utils" or "helpers" folder but do each function has a separate file or what is the general strategy to store/reuse them ?
So, as an example, I have a function that simply maps over an input array and returns an array. This function does not interact with the UI or call any other functions at all.
Where should this function go? Should I declare it within the Component? Should I make a separate function() declaration outside the Component at the bottom of the file?
If it's a function that is used in many files I would probably create a helper file to use it, but what if it's specific to this Component?
Just wondering what best practice is and why.
IMHO, put helpers outside. Your cons are not cons
- If a helper is specific to a component, then it is not a helper.
- The DRY principle refers to repeating logic rather than data
If your helper function belongs only to one component and are not used outside even not use external resourses, only some kind of specially render logic, you can treat as component logic.
If your helper function belongs to multiples components or projects, you will be breaking DRY rules repeting code and maybe adding logic that dont belong to component itself. So makes sense to create a helper function outsite component and treat the values that come from context and hooks as arguments of external function library, that can be reused over several projects.
» npm install react-helper
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'));