Following are the problems I am facing with my code -

1. Commodity Dropdown is initialised incorrectly - I am expecting modity 2 to be available on load time but it is taking modity 1 RESOVLED initialValue={valuesmodity.value} should be there in modity Select.
2. On change of modity from modity dropdown, plant dropdown is not updating at all. [STILL PENDING]

Working Example - (correct behaviour)

I tried to replicate the same with my Select but somehow its not working. Let me know what I am doing wrong here.

Faulty code -

Code -

const formikEnhancer = withFormik({
  mapPropsToValues: props => ({
    modity: { value: "modity2", label: "modity2" },
    plant: { value: "Plant3", label: "Plant3" }
  }),
  handleSubmit: (values, { setSubmitting }) => {
    const payload = {
      ...values,
      modity: valuesmodity.value,
      plant: values.plant.value
    };
    setTimeout(() => {
      alert(JSON.stringify(payload, null, 2));
      setSubmitting(false);
    }, 1000);
  },
  displayName: "MyForm"
});

Form -

<form onSubmit={handleSubmit}>
        <div style={{ margin: "1rem 0" }}>
          <label htmlFor="modity" style={{ display: "block" }}>
            Commodity
          </label>
          <Select
            id="modity"
            name="modity"
            value={modities}
            initialValue={valuesmodity}
            onChange={(field, value) => {
              console.log(value);
              setFieldValue("plant", plants[value][0]);
            }}
          />
        </div>
        <div style={{ margin: "1rem 0" }}>
          <label htmlFor="plant" style={{ display: "block" }}>
            Plant
          </label>
          <Select
            id="plant"
            name="plant"
            value={plants[valuesmodity.value]}
            onChange={setFieldValue}
          />
        </div>

        <button
          type="button"
          className="outline"
          onClick={handleReset}
          disabled={!dirty || isSubmitting}
        >
          Reset
        </button>
        <button type="submit" disabled={isSubmitting}>
          Submit
        </button>

        <DisplayFormikState {...this.props} />
      </form>

FYI - I am new to formik so may be I am missing something very mon here.

Following are the problems I am facing with my code -

1. Commodity Dropdown is initialised incorrectly - I am expecting modity 2 to be available on load time but it is taking modity 1 RESOVLED initialValue={values.modity.value} should be there in modity Select.
2. On change of modity from modity dropdown, plant dropdown is not updating at all. [STILL PENDING]

Working Example - https://codesandbox.io/s/ql95jvpxq4 (correct behaviour)

I tried to replicate the same with my Select but somehow its not working. Let me know what I am doing wrong here.

Faulty code - https://codesandbox.io/s/01qno3vmvl

Code -

const formikEnhancer = withFormik({
  mapPropsToValues: props => ({
    modity: { value: "modity2", label: "modity2" },
    plant: { value: "Plant3", label: "Plant3" }
  }),
  handleSubmit: (values, { setSubmitting }) => {
    const payload = {
      ...values,
      modity: values.modity.value,
      plant: values.plant.value
    };
    setTimeout(() => {
      alert(JSON.stringify(payload, null, 2));
      setSubmitting(false);
    }, 1000);
  },
  displayName: "MyForm"
});

Form -

<form onSubmit={handleSubmit}>
        <div style={{ margin: "1rem 0" }}>
          <label htmlFor="modity" style={{ display: "block" }}>
            Commodity
          </label>
          <Select
            id="modity"
            name="modity"
            value={modities}
            initialValue={values.modity}
            onChange={(field, value) => {
              console.log(value);
              setFieldValue("plant", plants[value][0]);
            }}
          />
        </div>
        <div style={{ margin: "1rem 0" }}>
          <label htmlFor="plant" style={{ display: "block" }}>
            Plant
          </label>
          <Select
            id="plant"
            name="plant"
            value={plants[values.modity.value]}
            onChange={setFieldValue}
          />
        </div>

        <button
          type="button"
          className="outline"
          onClick={handleReset}
          disabled={!dirty || isSubmitting}
        >
          Reset
        </button>
        <button type="submit" disabled={isSubmitting}>
          Submit
        </button>

        <DisplayFormikState {...this.props} />
      </form>

FYI - I am new to formik so may be I am missing something very mon here.

• javascript
• reactjs
• forms
• ecmascript-6
• formik

1 Answer 1

The initialValue was wrong set up. It should be string value instead of object. Select value was changing using state and props of parent ponent.

Here is working variant https://codesandbox.io/embed/n102qqq0nl