This happens because you’re re-defining renderField as a new component every time you render which means it looks like a new component to React so it’ll unmount the original one and re-mounts the new one. You’ll need to hoist it up: const renderField = ({ input, label, type, meta: { touched, invalid, error } }) … Read more
The form’s state subtree is destroyed when the form is unmounted, by design. This is the default and expected behaviour. From v6.2.1 onwards there is a form config property destroyOnUnmount, which explicitly enables/disables the state-clearing behaviour on a specific form (docs here) import { reduxForm } from ‘redux-form’; reduxForm({ form: ‘example’, destroyOnUnmount: false })(…) This … Read more
You can have the onChange logic in this.handleSelectChange({ value, type: input.name }) and use change action from redux-form According to the docs: change(field:String, value:any) : Function Changes the value of a field in the Redux store. This is a bound action creator, so it returns nothing. Code: import { change } from “redux-form”; handleSelectChange = … Read more
You need to add enableReinitialize: true as below. let InitializeFromStateForm = reduxForm({ form: ‘initializeFromState’, enableReinitialize : true // this is needed!! })(UserEdit) If your initialValues prop gets updated, your form will update too.
Using hooks on the value prop breaks the functionality of the autocomplete component ( at least for me ). Using class, and setting the local state is the same. Luckily it is a react component, so it have a “key” prop. When the key prop changes, the component is re-rendered with the default values ( … Read more
I like this answer from one of the Redux co-authors: https://github.com/reactjs/redux/issues/1287 Use React for ephemeral state that doesn’t matter to the app globally and doesn’t mutate in complex ways. For example, a toggle in some UI element, a form input state. Use Redux for state that matters globally or is mutated in complex ways. For … Read more
The redux-form Field will pass props through to the component: All other props will be passed along to the element generated by the component prop. The TextField has a property named InputProps which can be used to pass props to the Input component it renders. This is also true if you’re using redux-form-material-ui. Its TextField … Read more
The API provides component for this purpose. <Button variant=”contained” component=”label” > Upload File <input type=”file” hidden /> </Button>