HelperExample.jsx

import React, { Component } from 'react';
import Input from './Input';
import { validate } from './validation';

class LoginForm extends Component {
  rules = {
    name: (value) => !value && 'name cannot be empty' // Some rules for each fields
  }

  handleSubmit = () => {
    const { isValid, errors } = validate(this.rules, this.state.fields);
    if (isValid) {
      // TODO: submit data
    } else {
      this.setState({ errors });
    }
  }

  handleFieldChange = (fieldName, value) => {
    const newFields = {
      ...this.state.fields,
      [fieldName]: value
    }
    const { isValid, errors } = this.props.validate(this.rules[fieldName], newFields);
    this.setState(state => ({
      fields: newFields,
      errors
    }));
  }
  
  render {
    return (
      <div>
        <Input
          label="name"
          value={this.state.fields.name} 
          errorMessage={this.state.errors.name}
        />
        <button onClick={this.handleSubmit} />
      </div>
    );
  }
}

export default LoginForm;