Connect Material-ui ToggleButtonGroup to redux-form

Question

I'm trying to connect material-ui ToggleButtonGroup with redux form and getting issues with this. Here is my code:

<Field
  name='operator'
  component={FormToggleButtonGroup}
>
  <ToggleButton value='equals'>Equal</ToggleButton>
  <ToggleButton value='not_equals'>Not equal</ToggleButton>
</Field>

.. and my component, passed to Field:


const FormToggleButtonGroup = (props) => {
  const {
    input,
    meta,
    children
  } = props;

  return (
    <ToggleButtonGroup
      {...input}
      touched={meta.touched.toString()}
    >
      {children}
    </ToggleButtonGroup>
  );
};

export default FormToggleButtonGroup;

the problem is, when I select value (toggle option), selected value is not passed to redux store, it passed only after loosing focus and then throws error 'newValue.splice is not a function' Please help to deal with this issue

Sandbox with sample code

Valentine Valentine · Accepted Answer · 2020-07-17T09:45:56

Playing with the component I finally found the solution. I need manually assign new value got from ToggleButtonGroup component and put this value to redux store. Here is how working code looks:

const FormToggleButtonGroup = (props) => {
  const {
    input,
    meta,
    children,
    ...custom
  } = props;

  const { value, onChange } = input;
  return (
    <ToggleButtonGroup
      {...custom}
      value={value}
      onChange={(_, newValue) => {
        onChange(newValue);
      }}
      touched={meta.touched.toString()}
    >
      {children}
    </ToggleButtonGroup>
  );
};

Main change is getting redux's function onChange and call it with new value, selected when value toggled. There is onChange related to ToggleButtonGroup component and another onChange related to Redux. You need to call latter when ToggleButtonGroup's onChange occurs.

Connect Material-ui ToggleButtonGroup to redux-form

1 Answers