agoiabel

<button onClick={this.formSubmitHandler} 
        disabled={!this.state.formIsValid}
  > 
    Submit
</button>

agoiabel

  changeHandler = event => {
      const name = event.target.name;
      const value = event.target.value;

      const updatedControls = {
        ...this.state.formControls
      };
      const updatedFormElement = {
        ...updatedControls[name]
      };

agoiabel

	constructor () {
		super();
    
		this.state = {
			formIsValid: false, //we will use this to track the overall form validity
      
			formControls: {
				name: {
					value: '',
					valid: false,

agoiabel

import React from 'react';

const Radio = props => {

    let formControl = "form-control";

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

agoiabel

import React from 'react';

const Select = props => {

    let formControl = "form-control";

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

agoiabel

gender: {
  value: '',
  placeholder: 'What is your gender',
  valid: false,
  touched: false,
  validationRules: {
    isRequired: true,
  },
  options: [
    { value: 'male', displayValue: 'Male' },

agoiabel

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

agoiabel

import React from 'react';

const Password = props => {

    let formControl = "form-control";

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

agoiabel

import React from 'react';

const Email = props => {

    let formControl = "form-control";

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

agoiabel

import React from 'react';

const TextArea = props => {

    let formControl = "form-control";

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