Redux form: it is not possible to change the value of input elements

Question

I am trying to implement a form in MapsAddrForm.jsx using Redux-Form, and I cannot change the value of my input element. When the page loads, the input element does not respond to keyboard input, and when the form field is submitted, it returns an empty object to the parent component of DistrictFinder. Besides these two files, I also added a form: formReducer as an argument to combReducers, as a simple example in Redux-Form tutorials. Is there a way to restore DistrictFinder's ability to retrieve data objects from an address form? For reference, I use React 15.1.0, React-redux 4.4.5, ES6, and Redux-Form 5.3.1, all compiled using Webpack.

MapsAddrForm.jsx

import React, {Component} from 'react'; import { connect } from 'react-redux'; import {reduxForm} from 'redux-form'; class MapsAddrForm extends Component { constructor(props) { super(props); } render() { const {fields: {address,address2}, handleSubmit} = this.props; return ( <form onSubmit={handleSubmit}> <div> <input type="text" placeholder="Your address" {...address}/> </div> <button type="submit">Submit</button> </form> ); } } export default reduxForm({ form: 'addressForm', fields: ['address'] })(MapsAddrForm); 

DistrictFinder.jsx

 import React, { Component, PropTypes } from 'react' import MapsAddrForm from './MapsAddrForm.jsx' import { connect } from 'react-redux' import { changeAddress } from '../actions/index.jsx' class DistrictFinder extends Component { constructor(props) { super(props); this.handleAddrSubmit = this.handleAddrSubmit.bind(this); } handleAddrSubmit(data) { console.log("Address received: " + JSON.stringify(data)); } render() { const {address, district} = this.props return ( <div class="GMaps"> <h1>Find your district!</h1> <MapsAddrForm onSubmit={this.handleAddrSubmit} /> <p>My district number is: {district}</p> </div> ); } } DistrictFinder.propTypes = { district: PropTypes.string.isRequired, dispatch: PropTypes.func.isRequired }; function mapStateToProps(state) { const { district } = state.infoChange; return { district }; }; export default connect(mapStateToProps)(DistrictFinder); 

Answer 1

I came across this also on redux-form@6.2.0

After looking at the source for one example, I noticed that the combineReducers call has an explicit "form" key for the object argument. When I added this explicit key, the fields became editable.

 // Correct const reducer = combineReducers({ form: reduxFormReducer // mounted under "form" }) 

If you have an existing application, just like mine, you probably have this es6 syntax for style from various starters.

 // Incorrect: results in the witnessed bad behavior const reducer = combineReducers({ reduxFormReducer }) 

See calling combReducers at https://github.com/erikras/redux-form/blob/master/examples/simple/src/index.js#L10

It would be interesting to know if this could be a constant that could be passed and used in lib. "form" is perceived as an easily corrupt "namespace".