Set initialVariables in Formik from state if it is in edit mode

Question

I'm using Formik for validating some data. It works fine when it should create new entity, but there are problems when I want to edit an entity.

The edit mode must be activated from the state (this.state.edit === true), also the data of the entity is stored on the state, for example this.state.name has a string value there.

I put a console log in render, the problem is that the log is printed several times, the first time with empty string on this.sate.name and the value of this.state.edit is false. The next prints it is correct, this edit on true and name containing a value.

Here is the code:

import React from 'react';
import { Redirect } from 'react-router-dom';
import { Formik, Form, Field } from 'formik';
import { Input, Button, Label, Grid } from 'semantic-ui-react';
import { connect } from 'react-redux';
import * as Yup from 'yup';
import { Creators } from '../../../actions';

class CreateCompanyForm extends React.PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      name: '',
      redirectCreate: false,
      redirectEdit: false,
      edit: false,
    };
  }

  componentDidMount() {
    const {
      getCompany,
      getCompanies,
      location: { pathname },
    } = this.props;
    getCompanies({
      name: '',
    });

    if (pathname.substring(11) !== 'create') {
      getCompany(pathname.substring(16));
      this.setState({
        edit: true,
      });

      this.setState({
        name: this.props.company.name,
      });
    }
  }



  handleSubmitCreate = e => {
    e.preventDefault();
    const { createCompany, getCompanies } = this.props;
    createCompany(this.state);
    this.setState({ redirectCreate: true });
    getCompanies(this.props.query);
  };

  handleSubmit = values => {
    const { createCompany, getCompanies } = this.props;
    createCompany(values);
    this.setState({ redirectCreate: true });
    getCompanies(this.props.query);
  };

  handleSubmitEdit = e => {
    e.preventDefault();
    const { name } = this.state;
    const { updateCompany } = this.props;
    updateCompany(this.props.company._id, {
      name,
    });
    this.setState({ redirectEdit: true });
  };

  render() {
    let title = 'Create company';
    let buttonName = 'Create';
    let submit = this.handleSubmitCreate;

    const { redirectCreate, redirectEdit } = this.state;

    if (redirectCreate) {
      return <Redirect to="/companies" />;
    }

    if (redirectEdit) {
      return <Redirect to={`/companies/${this.props.company._id}`} />;
    }

    if (this.state.edit) {
      title = 'Edit company';
      buttonName = 'Edit';
      submit = this.handleSubmitEdit;
    }
    console.log('state: ', this.state); // first time it is empty, next times it has data
    let initialValues = {};
    if (this.state.edit) {
      initialValues = {
        name: this.state.name,
      };
    } else {
      initialValues = {
        name: '',
      };
    }

    const validationSchema = Yup.object({
      name: Yup.string().required('This field is required'),
    });

    return (
      <>
        <Button type="submit" form="amazing">
          create company
        </Button>

        <Formik
          htmlFor="amazing"
          initialValues={initialValues}
          validationSchema={validationSchema}
          onSubmit={values => this.handleSubmit(values)}>
          {({ values, errors, touched, setValues, setFieldValue }) => (
            <Form id="amazing">
              <Grid>
                <Grid.Column>
                  <Label>Company name</Label>
                  <Field name="name" as={Input} placeholder="write a name" />
                  <div>{touched.name && errors.name ? errors.name : null}</div>
                </Grid.Column>
              </Grid>

              <Button type="submit" floated="right" form="amazing">
                {buttonName} company
              </Button>
            </Form>
          )}
        </Formik>
      </>
    );
  }
}

const mapStateToProps = state => ({
  companies: state.companies.companies,
  company: state.companies.selectedCompany,
  query: state.companies.query,
});

const mapDispatchToProps = {
  getCompanies: Creators.getCompaniesRequest,
  createCompany: Creators.createCompanyRequest,
  getCompany: Creators.getCompanyRequest,
  updateCompany: Creators.updateCompanyRequest,
};

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

I put the whole file here to have more context. Is it a way to set the initialValue of name with the value from this.state.name and put it inside the input field?

Answer 1

By default Formik does not re-render if the initial values change. You can pass enableReinitialize prop to Formik component to allow it.

As you said in the comment, first time it renders, it has no data, hence it does initialise Formik with empty values. With that prop, it should re-render if the initial values change.

https://formik.org/docs/api/formik#enablereinitialize-boolean