Skip to main content

React Create & Use Helper Functions | React Component

How to use helper functions in a React component?
Create a helper function is a very common practice to achieve modularity. However, you can use it for code reusability. 

You can use helper functions just like other frameworks. Also, you can achieve code reusability by using these functions.

 Explore React 63 Best FAQs

In the blow example, we have to create a helper class and use to it.
As an Example,

-  Helpers.js
  export function plus(x, y) {
    return x + y;
  }

  export function minus(x, y) {
    return x - y;
  }

  export function multiply(x, y) {
    return x * y;
  }

  export function divide(x, y) {
    return x / y;
  }

Import and Use of Helper methods in calculator components,

import React from 'react';
import { plus, minus } from './Helpers'

class CalculatorComponents extends React.Component {
    constructor(props){
        super(props);
        this.yourClickFunction=this.yourClickFunction.bind(this);
    }

    yourClickFunction(x, y){
      console.log(plus(x, y)); //Output will be (10, 20) => 30
      console.log(minus(x, y)); //Output will be (10, 20) => -10
    }

    render() {
        return (
            <div>
                <h4>React Helper functions</h4>
                <button onClick={this.yourClickFunction(10, 20)}>Click..</button>
            </div>
        );
    }
}
export default CalculatorComponents;


The result of these helper’s methods –

Labels: