company.js

import React from 'react';
import { Field } from 'redux-form';
import { PrimaryButton, TransparentButton } from 'Components/Generics/Buttons';
import { GTextField } from 'Components/Generics/Forms';
import FormHeadline from '../Generics/FormHeadline';
import {
  Wrapper,
  GridContainer,
  FormWrapper,
  InlineForm,
  ButtonGrid,
  StyledForm,
} from '../Generics/FormStyle';
// import enhance from './enhancer';

const Company = ({
  company,
  handleChange,
  handleSubmit,
}: {
  company: Object,
  handleChange: Function,
  handleSubmit: Function
}) => {
  console.log('company in render', company);
  return (
    <React.Fragment>
      <FormHeadline headline="Company" weight="400" />
      <Wrapper>
        <GridContainer container spacing={24}>
          <StyledForm autoComplete="off" onSubmit={handleSubmit}>
            <FormWrapper>
              <Field
                id="company_name"
                name="company_name"
                type="text"
                label="Company Name"
                className="input-field"
                component={GTextField}
                required
                margin="normal"
              />
              <Field
                id="website"
                name="website"
                type="text"
                label="Website"
                placeholder="Website"
                className="input-field"
                component={GTextField}
                required
                margin="normal"
              />
              <InlineForm>
                <Field
                  id="industry"
                  name="industry"
                  type="text"
                  label="Industry"
                  className="input-field"
                  component={GTextField}
                  margin="normal"
                />
                <Field
                  id="number_of_employee"
                  name="number_of_employee"
                  type="text"
                  label="No. of Employees"
                  className="input-field"
                  component={GTextField}
                  margin="normal"
                />
              </InlineForm>
              <InlineForm>
                <Field
                  id="phone_number"
                  name="phone_number"
                  type="text"
                  label="Phone Number"
                  placeholder="Phone Number"
                  className="input-field"
                  component={GTextField}
                  margin="normal"
                />
                <Field
                  id="founded"
                  name="founded"
                  type="text"
                  label="Founded"
                  placeholder="Founded"
                  className="input-field"
                  component={GTextField}
                  margin="normal"
                />
              </InlineForm>
              <Field
                id="address"
                name="address"
                type="text"
                label="Address"
                placeholder="Address"
                className="input-field"
                component={GTextField}
                margin="normal"
              />
              <InlineForm>
                <Field
                  id="state"
                  name="state"
                  type="text"
                  label="State"
                  placeholder="State"
                  className="input-field"
                  component={GTextField}
                  margin="normal"
                />
                <Field
                  id="city"
                  name="city"
                  type="text"
                  label="City"
                  placeholder="City"
                  className="input-field"
                  component={GTextField}
                  margin="normal"
                />
              </InlineForm>
              <InlineForm>
                <Field
                  id="zip"
                  name="zip"
                  type="text"
                  label="Zip Code"
                  placeholder="Zip Code"
                  className="input-field"
                  component={GTextField}
                  margin="normal"
                />
                <Field
                  id="country"
                  name="country"
                  type="text"
                  label="Country"
                  placeholder="Country"
                  className="input-field"
                  component={GTextField}
                  margin="normal"
                />
              </InlineForm>
              <InlineForm>
                <Field
                  id="wiki"
                  name="wiki"
                  type="text"
                  label="Wiki"
                  placeholder="Wiki"
                  className="input-field"
                  component={GTextField}
                  margin="normal"
                />
                <Field
                  id="headquarter"
                  name="headquarter"
                  type="text"
                  label="Headquarter"
                  placeholder="Headquarter"
                  className="input-field"
                  component={GTextField}
                  margin="normal"
                />
              </InlineForm>
              <InlineForm>
                <Field
                  id="speciality"
                  name="speciality"
                  type="text"
                  label="Speciality"
                  placeholder="Speciality"
                  className="input-field"
                  component={GTextField}
                  margin="normal"
                />
                <Field
                  id="info_type"
                  name="info_type"
                  type="text"
                  label="Type"
                  placeholder="Type"
                  className="input-field"
                  component={GTextField}
                  margin="normal"
                />
              </InlineForm>
              <ButtonGrid>
                <PrimaryButton variant="raised" marginRight radius="2px">
                  Save
                </PrimaryButton>
                <TransparentButton variant="raised" radius="2px">
                  Cancel
                </TransparentButton>
              </ButtonGrid>
            </FormWrapper>
          </StyledForm>
        </GridContainer>
      </Wrapper>
    </React.Fragment>
  );
};

export default Company;

index.js

import React from 'react';
import { reduxForm } from 'redux-form';
import { connect } from 'react-redux';
import validate from 'Components/Generics/Forms/validate';
import { loadCompany, saveCompany } from './redux/actions';
import Company from './Company';

const initialState = {
  company_name: '',
  website: '',
  industry: '',
  number_of_employees: '',
  phone_number: '',
  founded: '',
  address: '',
  city: '',
  state: '',
  zip_code: '',
  country: '',
  wiki: '',
  headquarter: '',
  speciality: '',
  type: '',
};

const mapStateToProps = (state) => {
  const { company } = state.profile.companyReducer;
  return {
    getCompany: state.profile.companyReducer,
    initialValues: company && company.records,
  };
};

const mapDispatchToProps = dispatch => ({
  loadCompany: () => dispatch(loadCompany()),
  saveCompany: companyData => dispatch(saveCompany(companyData)),
});

class ParentCompany extends React.Component {
  state = {
    company: initialState,
  };

  componentDidMount() {
    this.props.loadCompany();
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    // console.log('prevState', prevState);
    const { company } = nextProps.getCompany;
    if (company && company.records !== undefined) {
      const { records } = company;
      console.log('records', records === prevState.company);
      return {
        company: records,
      };
    }
    return null;
  }

  handleChange = (event) => {
    const { name, value } = event.target;
    this.setState({ company: { ...this.state.company, [name]: value } });
  };

  handleSubmit = (event) => {
    event.preventDefault();
    console.log('this', event);
    // this.props.saveCompany(this.state.company);
  };

  render() {
    return (
      <div>
        <Company
          company={this.state.company}
          handleChange={this.handleChange}
          handleSubmit={this.handleSubmit}
        />
      </div>
    );
  }
}

const requiredFields = {
  company_name: 'Company Name',
  website: 'Website',
};

const withReduxForm = reduxForm({
  form: 'companyForm',
  fields: requiredFields,
  validate,
  destroyOnUnmount: false,
  enableReinitialize: true,
  // keepDirtyOnReinitialize: true,
})(ParentCompany);

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(withReduxForm);