value is not shown in the field when using redux form

Question

I am using redux-form for the form. The form gets submitted but if page is refreshed I need to show that submitted data which comes from the server. Everything is working, the local state is also updated from getDerivedStateFromProps but the field does not show with the data. I used plain input tag and it shows up the data. What have i missed?

Here is what I have done

UPDATE

  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)),
});

const withConnect = connect(
  mapStateToProps,
  mapDispatchToProps,
);

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

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

const enhance = compose(
  withReduxForm,
  withConnect,
  withState('company', 'updateCompany', initialState),
  withHandlers({
    handleChange: props => ({ target: { name, value } }) => {
      props.updateCompany({ ...props.company, [name]: value });
    },
    handleSubmit: props => (event) => {
      event.preventDefault();
      props.saveCompany(props.company);
    },
  }),
  setStatic('getDerivedStateFromProps', (nextProps) => {
    const { company } = nextProps.getCompany;
    if (company && company.records !== undefined) {
      console.log('company records getDerivedStateFromProps', company.records);
      return {
        company: company.records,
      };
    }
    return null;
  }),
  lifecycle({
    componentDidMount() {
      this.props.loadCompany();
    },
  }),
);

export default enhance;



const Company = ({
  company,
  handleChange,
  handleSubmit,
}: {
  company: Object,
  handleChange: Function,
  handleSubmit: Function
}) => {
  console.log('company', company);
  return (
    <React.Fragment>
      <FormHeadline headline="Company" weight="400" />
      <Wrapper>
        <GridContainer container spacing={24}>
          <StyledForm autoComplete="off" onSubmit={handleSubmit}>
            <FormWrapper>
              <input
                name="company_name"
                id="company_name"
                type="text"
                label="Company Name"
                className="input-field"
                value={company.company_name}
                onChange={handleChange}
              />
              {/* <Field
                id="company_name"
                name="company_name"
                type="text"
                label="Company Name"
                className="input-field"
                value="Hello"
                onChange={handleChange}
                component={GTextField}
                required
                margin="normal"
              /> */}
              <Field
                id="website"
                name="website"
                type="text"
                label="Website"
                placeholder="Website"
                className="input-field"
                value={company.website}
                onChange={handleChange}
                component={GTextField}
                required
                margin="normal"
              />
              </FormWrapper>
            </StyledForm>
          </GridContainer>
        </Wrapper>
      </React.Fragment>
    );
  };

  export default enhance(Company);


  generic text field 

  const GTextField = ({
    input,
    label,
    meta: { touched, error },
    ...rest
  }: {
    input: any,
    label: Node,
    meta: {
      touched: boolean,
      error: boolean
    }
  }) => {
    console.log('rest', input);
    return (
      <TextField
        label={label}
        helperText={touched && error}
        error={!!(touched && error)}
        {...input}
        {...rest}
      />
    );
  };

This works but not the Field one

<input
  name="company_name"
  id="company_name"
  type="text"
  label="Company Name"
  className="input-field"
  value={company.company_name}
  onChange={handleChange}
/>

UPDATE

props.initialValues shows the following but still the field is not updated

here is the full code

https://gist.github.com/MilanRgm/e3e0592c72a70a4e35b72bb6107856bc

Answer 1

Hi first replace the input tag with the commented out field component itself then set these flags in reduxform

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

as well as pass the initialValues props to the form container with the server response

{
  company_name: 'response value from server'
}

Answer 2

Hi checkout this fiddle link for initialValues example. For your example with reducer

  const mapStateToProps = state => ({ 
   getCompany: state.profile.companyReducer, 
   initialValues: state.profile.[your reducer object] });