agoiabel

<button onClick={this.formSubmitHandler} 
        disabled={!this.state.formControls.name.valid}
  > 
            Submit
</button>

agoiabel

.form-control {
  width: 50%;
  border: 1px solid #ccc;
  padding: 10px; 
}

.control-error {
  border: 1px solid red;
}

agoiabel

import React from 'react';

const TextInput = props => {

    let formControl = "form-control";

    if (props.touched && !props.valid) {
        formControl = 'form-control control-error';
    }

agoiabel

  render() {
    
    return (  
          <TextInput name="name" 
                     placeholder={this.state.formControls.name.placeholder}
                     value={this.state.formControls.name.value}
                     onChange={this.changeHandler}
                     touched={this.state.formControls.name.touched}
                     valid={this.state.formControls.name.valid}
          />

agoiabel

import React, { Component } from 'react';
import TextInput from './TextInput';
import validate from './validator';

class FormComponent extends Component {
  
  constructor() {
    super();
  
    this.state = {

agoiabel

const validate = (value, rules) => {
  let isValid = true;
  
  for (let rule in rules) {
  
    switch (rule) {
      	case 'minLength': isValid = isValid && minLengthValidator(value, rules[rule]); break;
        
        case 'isRequired': isValid = isValid && requiredValidator(value); break;
		    

agoiabel

constructor() {
  super();
  
  this.state = {
    formControls: {
      
      name: {
        value: ''.
        placeholder: 'What is your name',
        valid: false,

agoiabel

const validate = (value, rules) => {
  let isValid = true;
  
  for (let rule in rules) {
  
    switch (rule) {
      	case 'minLength': isValid = isValid && minLengthValidator(value, rules[rule]); break;
        
      	default: isValid = true;
    }

agoiabel

changeHandler = event => {
    
    const name = event.target.name;
    const value = event.target.value;
    
    const updatedControls = {
	...this.state.formControls
    };
    const updatedFormElement = {
	...updatedControls[name]

agoiabel

  changeHandler = event => {
    
    const name = event.target.name;
    const value = event.target.value;
    
    this.setState(prevState => {
      return {
        formControls: {
          ...prevState.formControls,