React-redux-form: Model data not loading into text fields

[ffxsam]

Hey @davidkpiano, I'm wondering if something broke in a recent update? I've got the following code:

          <Form model="reelModel" onSubmit={reel => this.saveReel(reel)}>

            <Field className="ReelDraft__name" model="reelModel.name">
              <input
                type="text"
                size={26}
                placeholder={i18n.__('reelBuilder.namePlaceholder')}
              />
            </Field>

And when I do the following, as a test:

dispatch(actions.change('reelModel.name', 'Testing!'));

nothing happens to the text field. Though if I type in the text field, I can see it updating in Redux.

[ffxsam]

Just confirmed this on a very minimal reproduction.

[ffxsam]

/client/reducers.js

import { combineReducers } from 'redux';
import appstate from './appstate';
import { formReducer, modelReducer } from 'react-redux-form';

const defaultData = {
  name: '',
};

export default combineReducers({
  appstate,
  myModel: modelReducer('myModel', defaultData),
  myForm: formReducer('myModel', defaultData),
});

/client/pages/Home.js

import React, { Component, PropTypes } from 'react';
import { actions, Field, Form } from 'react-redux-form';
import store from '/client/store';

export default class Home extends Component {
  test() {
    store.dispatch(actions.change('myModel.name', 'Nobody'));
  }

  render() {
    return <div>
      <h1>Home.</h1>

      <button onClick={this.test}>Set myModel.name to Nobody</button>

      <div>
        <Form model="myModel">
          <p>Hello {this.props.myModel.name}</p>
          <Field model="myModel.name">
            <input type="text" />
          </Field>
        </Form>
      </div>
    </div>
  }
}

[ffxsam]

[davidkpiano]

Hey @ffxsam, this is actually the expected behavior (currently). Check here for more information: https://davidkpiano.gitbooks.io/react-redux-form/content/faqs.html

In short, you have to make the inputs controlled yourself (for now):

          <Field model="myModel.name">
-           <input type="text" />
+           <input type="text" value={this.props.myModel.name} />
          </Field>

I'm strongly considering switching these to controlled in v1.0. What do you think?

[ffxsam]

Ahh! The weird thing is, I checked out older versions and my code still didn't work.. very odd.

I actually don't like the idea of having to reference this.props.myModel.name, because then any place I want to have a form, I have to wire up Redux myself, which gets messy. I'm following a very strict container model (see here and here), so this would mean I'd have to have containers everywhere just to use forms. The thing I actually liked about react-redux-form is that I didn't have to worry about using connect and mapping state to props.

So.. a very strong vote for keeping the functionality as it was before :)

<Field model="myModel.name">
  <input type="text" />
</Field>

[davidkpiano]

So.. a very strong vote for keeping the functionality as it was before :)

Hmm, I'm pretty sure that functionality wasn't there before, since components were always uncontrolled by default, but I understand your concern.

Components will be controlled in v1.0, I've decided. It'll be a breaking change (hence 1.0) though it won't affect many forms.

[ffxsam]

Really? Even in the documentation, you have this:

import { Field } from 'react-redux-form';

// inside a component's render() method ...
<Field model="user.name">
  <input type="text" />
</Field>

And I swear I didn't have to have <input type="text" value={this.props.user.name} /> before. Strange. I feel like I'm in the Twilight Zone. ;)

[davidkpiano]

You don't have to, don't worry 😌 the component will work just fine as an _uncontrolled_ component.

It's when you want the input to magically update that you'll have to make it controlled.

[ffxsam]

Hey @davidkpiano - one quick follow-up question. In this case:

            <MUITextField model="insightModel.title">
              <TextField
                floatingLabelText="Title"
                errorText={getError(fields, 'title')}
              />
            </MUITextField>

where MUITextField is a custom component I made using createFieldClass, this makes the TextField a controlled input, correct? If I load data into the model, it will automatically populate the field.

[ffxsam]

In other words, I can use createFieldClass to make fully controlled inputs without having to use connect to get the redux state mapped to props, right?

[ffxsam]

I'm also getting a few warnings:

Warning: Input elements must be either controlled or uncontrolled (specify either the value prop, or the defaultValue prop, but not both). Decide between using a controlled or uncontrolled input element and remove one of these props. More info: https://fb.me/react-controlled-components

Warning: ReelDraft is changing a controlled input of type text to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://fb.me/react-controlled-components

Warning: ReelDraft is changing a uncontrolled input of type hidden to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://fb.me/react-controlled-components

The code is:

            <Field className="ReelDraft__name" model="reelModel.name">
              <input
                type="text"
                size={26}
                placeholder={i18n.__('reelBuilder.namePlaceholder')}
                value={reelModel.name}
              />
            </Field>

Any ideas? Functionally it works. The field is pre-populated, and as I change it, it updates in Redux. But the warnings are a bit concerning.

[davidkpiano]

Yeah, these warnings are new as of React 15.0. I'm still looking into them, and in v1.0 the components will be controlled by default anyway.

[davidkpiano]

In other words, I can use createFieldClass to make fully controlled inputs without having to use connect to get the redux state mapped to props, right?

Yes, you have the full ability to do that.

[ffxsam]

Sounds good! I'll ignore the warnings then :)