Set value in field in redux form Set value in field in redux form reactjs reactjs

Set value in field in redux form


When using redux-form, you don't need to set the value directly into the field. You can use the method initialize to populate your form. Or initialValues as a property of the object passed to redux to map state to props. The other way is to set the values individually using the function change from redux-form. In order to make it to work, you need to wrap your component with connect from react-redux. It embeds the dispatch method in your props.

import React, { Component } from 'react';import { reduxForm, Field, change } from 'redux-form';import { connect } from 'react-redux';class Form extends Component {  componentDidMount() {    this.props.initialize({ accountno: 'some value here' });    // set the value individually    this.props.dispatch(change('myFormName', 'anotherField', 'value'));  }  render() {    return (      <form onSubmit={...}>        ...        <Field name="accountno" component={InputText} placeholder="Number" />        <Field name="anotherField" component={InputText} />      </form>    )  }}Form = reduxForm({   form: 'myFormName' })(Form);export default connect(state => ({   // alternatively, you can set initial values here...  initialValues: {    accountno: 'some value here'  } }))(Form);


Just came up against this issue as well. The solution is to use initialValues as in juliobetta's answer, however the key is to set the value to a variable, such as state.blah.

You then need to set enableReinitialize to true so that the fields get updated when the state changes:

export default connect(state => ({   initialValues: {    accountno: state.accountno,  },  enableReinitialize: true,}))(Form);

Now, every time you change state.accountno, the form field will be updated.