How should I update Redux Form Select Field Options

Question

In my project, I need to update Select Field Options based on some conditions, but this will cause a problem. For example, the previous options are

[{ text: "a", value: "a" }, { text: "b", value: "b" }],

and user picks:

{ text: "a", value: "a" }.

Then based on some conditions, the options change to

[{ text: "c", value: "c" }, { text: "d", value: "d" }].

However, the value for this field in the redux form is still { text: "a", value: "a" }.

This will send wrong data when the form is submitted.

Is there anyway I can handle this globally? Because this situation is quite usual in my project.

I am thinking that in the select onChange event, we can check the form value is in the options or not. Can anyone provide some suggestions on how to do this?

This is my select component:

import React from "react";
import { Form, Popup } from "semantic-ui-react";
import Tooltip from "./Tooltip";

const RenderFieldSelect = ({
  input,
  label,
  placeholder,
  options,
  required,
  meta: { touched, error, warning }
}) => (
  <Popup
    trigger={
      <Form.Select
        {...input}
        label={label}
        onChange={(e, { value }) => input.onChange(value)}
        options={options}
        placeholder={placeholder}
        error={error ? true : null}
        required={required === "Y" ? true : null}
        fluid
      />
    }
    flowing
    hoverable
  >
    <Tooltip touched={touched} error={error} warning={warning} />
  </Popup>
);

export default RenderFieldSelect;

not sure why you would want that, but you can use in the onChange handler the change() that redux form provides, which will change your specific field data. you can read more redux-form.com/8.2.2/docs/api/props.md/… — Eliran
@Eliran, Thanks for your reply. Because based on the value of another select field, the options for this select will be updated. This is the business request. — PLee

PLee PLee · Accepted Answer · 2019-06-18T22:49:14

I have found the solution to this issue. I add a DynamicOptionsFlag to mark those fields may change options. Then when the select field is rendered, I will check if the input value is in the options array. If not, the value will be updated to be "".

import React from "react";
import { Form, Popup } from "semantic-ui-react";
import Tooltip from "./Tooltip";

const RenderFieldSelect = ({
  input,
  label,
  placeholder,
  options,
  DynamicOptionsFlag,
  required,
  meta: { touched, error, warning }
}) => {
  if (DynamicOptionsFlag==="Y") {
    let flag = false;
    for (let option of options) {
      if (option["value"] === input["value"]) {
        flag = true;
        break;
      }
    }
    if (!flag) {
      input.onChange("");
    }
    }

  return (
    <Popup
      trigger={
        <Form.Select
          {...input}
          label={label}
          onChange={(e, { value }) => input.onChange(value)}
          options={options}
          placeholder={placeholder}
          error={error ? true : null}
          required={required === "Y" ? true : null}
          fluid
        />
      }
      flowing
      hoverable
    >
      <Tooltip touched={touched} error={error} warning={warning} />
    </Popup>
  );
};
export default RenderFieldSelect;

How should I update Redux Form Select Field Options

1 Answers