Redux-form how to update Material-UI v4 textField value?

Question

How to update TextField value(from state) by using redux-form?

I am using the version below:

  "@material-ui/core": "^4.11.0"
  "redux-form": "^8.3.6"

Before I use redux-form, I was able to update the TextField value from the onChange event by dispatch to the reducer action such as below:

<TextField
  id="name-id"
  label="Name"
  name="Name"
  value={props.Info.Name || ""}
  onChange={(e) => {
    props.updateTextInput({ //calling reducer
      name: e.currentTarget.name,
      value: e.currentTarget.value,
    });
  }}
/>

Now, I want to use the redux form, but I am not able to typing in the input field. I've tried to add value property but not working. Below are my redux-form code:

const renderTextField = ({
  label,
  input,
  meta: { touched, invalid, error },
  ...custom
}) => (
    <TextField
      label={label}
      placeholder={label}
      value="test value" //try to set value, but not working
      error={touched && invalid}
      helperText={touched && error}
      {...input}
      {...custom}
    />
  );

<Field
  name="Name"
  component={renderTextField}
  label="Name"
  variant="outlined"
  fullWidth
  value={props.Info.Name || ""} //try to set value, but not working
  onChange={(e) => {
    props.userUpdateTextInput({
      name: e.currentTarget.name,
      value: e.currentTarget.value,
    });
  }}
/>

I found on the {...input} there is an onChange function, it will perform something for redux-form, but at the end, my input text will be removed.

Devb Devb · Accepted Answer · 2020-07-12T13:35:01

What I missed is the formReducer. After adding the code below, everything working as expected.

import { reducer as formReducer } from 'redux-form';
export default combineReducers({
  User: userReducer,
  form: formReducer,
});

Redux-form how to update Material-UI v4 textField value?

1 Answers