Set value in field in redux form

Question

I have redux form having dropdown and text fields. On dropdown change i have to update the other fields. The other fields are using custom component example

So the structure is like. 1. component having form 2. Field component.

Now i googled and found few things to update the field but not able to do it. What i tried 1. Adding state in the field like below in value. Does not work.

<Field name="accountno" value="this.state.accountno" component={InputText} placeholder="Number" /> 

2. Tried disptach but not able to use it. Getting error for no dispatch i prop type

   this.props.dispatch(change('form', 'accountno', 'test value'));

3. Tried this.props.fields but same not fields in props type.

It should work using 2 or 3 but not able to find where to add those. Please let me know how can i use these or any other way.

Answer 1

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);