How to use Validations.rules inside a function?

[CaptainOfFlyingDutchman]

I have Validations.rules in a separate file within a function, as shown below:

import React from 'react';
import ServiceUtil from "service/serviceUtil";
import Validator from 'validator';
import Validation from 'react-validation';

const validations = (labels) => {
  Object.assign(Validation.rules, {
    email: {
      rule: value => {
        if (value) {
          return Validator.isEmail(value);
        }
        return false;
      },

      hint: () => {
        return <span className="form-error is-visible">{ServiceUtil.getLabel(/* some args here */)}</span>;
      }
    },

    required: {
      rule: value => {
        if (value) {
          return value.toString().trim();
        }
        return false;
      },

      hint: () => {
        return <span className="form-error is-visible">{ServiceUtil.getLabel(/* some args here */)}</span>;
      }
    }
  });
};

export default validations;

and using it inside another file as follows:

class MyComponent extends Component {
 componentDidMount() {
    validations(this.props.labels);
  }
}

But it's throwing the error caught TypeError: Cannot read property 'rule' of undefined(…)(anonymous function) @ validation.js:743Form.this.getErrors @ validation.js:737Form.this.validateState @ validation.js:769componentDidMount @ validation.js:822invokeComponentDidMountWithTimer @ ReactCompositeComponent.js:60notifyAll @ CallbackQueue.js:67close @ ReactReconcileTransaction.js:81closeAll @ Transaction.js:204perform @ Transaction.js:151batchedMountComponentIntoNode @ ReactMount.js:127perform @ Transaction.js:138batchedUpdates @ ReactDefaultBatchingStrategy.js:63batchedUpdates @ ReactUpdates.js:98_renderNewRootComponent @ ReactMount.js:321_renderSubtreeIntoContainer @ ReactMount.js:402render @ ReactMount.js:423(anonymous function) @ client.jsx:78__webpack_require @ bootstrap f0f5299…:555fn @ bootstrap f0f5299…:86(anonymous function) @ bootstrap f0f5299…:578__webpack_require__ @ bootstrap f0f5299…:555(anonymous function) @ bootstrap f0f5299…:578(anonymous function) @ bootstrap f0f5299…:578

Any idea, what am I missing? Thanks a lot for help!

[ghost]

Can you post your code in your Form?

[GSingh01]

@ManvendraSK I donot export it as separate module instead i assign rules directly like:

//FileName: FormValidationRules.jsx
import React from 'react';
import { rules } from 'react-validation/lib/build/validation.rc' 
import validator from 'validator';
 
Object.assign(rules, {
    // Key name maps the rule 
    required: {
        // Function to validate value 
        // NOTE: value might be a number -> force to string 
        rule: value => {
            return !validator.isEmpty(value.toString().trim());
        },
        // Function to return hint 
        // You may use current value to inject it in some way to the hint 
        hint: value => {
            return <span className='form-error is-visible'>Required</span>
        }
    }
});

and then i have following at the root component of the app import 'path to your rules file';

Which makes it available in whole app.

My root component looks like

import React from 'react'
import './App.css';
import './FormValidationRules';
export default React.createClass({
  render() {
    return (
      <div>        
        <div>{this.props.children}</div>
      </div>)
  }
});