title: How to populate a Redux-Form select/dropdown from state
body: <p>What's the best practice for populating a select/dropdown from state?</p>
  
  <p>I'm populated a redux-form like this... </p>
  
  <pre><code>import React from 'react';
  import { connect } from 'react-redux';  
  import { Field, reduxForm } from 'redux-form';  
  import FormItem from '../FormItem.js';
  import FormFooter from '../../components/FormFooter.js';
  import Button from '../../components/Button.js';
  
  let UserForm = props =&gt; {
  
    const { handleSubmit, onSubmit } = props;
  
      return (
      &lt;form onSubmit={handleSubmit(onSubmit)}&gt;
  
              &lt;FormItem
                  label = { &lt;label htmlFor="firstName"&gt;First Name&lt;/label&gt; }
                  field = { &lt;Field name="firstName" type="text" placeholder="First name" component="input" className="w-full"/&gt;} 
              /&gt;
  
              &lt;FormItem
                  label = { &lt;label htmlFor="lastName"&gt;Last Name&lt;/label&gt; }
                  field = { &lt;Field name="lastName" type="text" placeholder="Last name" component="input" className="w-full"/&gt; }
              /&gt;
  
              &lt;FormFooter
                  left={ &lt;Button href="/users" icon="fa-ban" text="Cancel" /&gt; }
                  right={ &lt;button type="submit"&gt;Save&lt;/button&gt; }
              /&gt;
  
          &lt;/form&gt;
      )
  }
  
  UserForm = reduxForm({
    form: 'userForm'
  })(UserForm)
  
  function mapStateToProps(state) {  
    return { initialValues: state.user.data }
  }
  
  UserForm = connect(mapStateToProps
  )(UserForm)
  
  export default UserForm
  </code></pre>
  
  <p>Here's the file that includes that form and gets the data:</p>
  
  <pre><code>import React from 'react';
  import { connect } from 'react-redux';  
  import PageHeaderBar from '../../components/PageHeaderBar.js';
  import PageWrapper from '../PageWrapper.js';
  import ContentWrapper from '../ContentWrapper.js';
  import { loadUser, updateUser } from '../../actions/users';
  import UserAccountForm from './UserAccountForm';
  import { Values } from "redux-form-website-template";
  
  class UserAccount extends React.Component {
  
    constructor(props) {
      super(props);
          this.handleSubmit = this.handleSubmit.bind(this);
    }
  
    componentDidMount() {
          this.props.loadUser(localStorage.getItem('userId'));
    }
  
    handleSubmit(formProps) {
      this.props.updateUser(formProps);
    }
  
    render() {
  
      return (
  
        &lt;PageWrapper&gt;
  
          &lt;PageHeaderBar title="User profile" /&gt;
  
          &lt;ContentWrapper&gt;
                      &lt;UserAccountForm onSubmit={this.handleSubmit} /&gt;
                      &lt;Values form="userForm" /&gt;
          &lt;/ContentWrapper&gt;
  
        &lt;/PageWrapper&gt;
      );
    }
  }
  
  export default connect(null, { loadUser, updateUser })(UserAccount);  
  </code></pre>
  
  <p>Root reducer:</p>
  
  <pre><code>import { combineReducers } from 'redux';  
  import { reducer as formReducer } from 'redux-form';  
  import authReducer from './auth_reducer';
  import userReducer from './user_reducer';
  import categoryReducer from './user_reducer';
  
  const rootReducer = combineReducers({  
    auth: authReducer,
    form: formReducer,
    user: userReducer.
    category: categoryReducer
  });
  
  export default rootReducer; 
  </code></pre>
  
  <p>User reducer:</p>
  
  <pre><code>import { LOAD_USER_SUCCESS, LOAD_USERS_SUCCESS } from '../actions/types';
  
  const INITIAL_STATE = { data: {} }
  
  export default function (state = {}, action) {  
    switch(action.type) {
      case LOAD_USER_SUCCESS:
        return { ...state, data: action.data };
      case LOAD_USERS_SUCCESS:
        console.log('LOAD_USER_SUCCESS');
        return { ...state, data: action.data };
      default:
        return state;
    }
  }
  </code></pre>
  
  <p>Now I want to add a select to the form above with the following component, and populate it's values from state.category.data. Here's what I have so far...</p>
  
  <pre><code>import React from 'react';
  import { connect } from 'react-redux';  
  import { loadCategories } from '../../actions/categories';
  import { Field, reduxForm } from 'redux-form';  
  import FormItem from '../FormItem.js';
  import VirtualizedSelect from 'react-virtualized-select'
  import 'react-datepicker/dist/react-datepicker.css';
  
  export const renderSelect = (field) =&gt; (
    &lt;VirtualizedSelect
      onChange={field.input.onChange}
      optionHeight={35}
      value={field.input.value}
    /&gt;
  );
  
  class CategorySelects extends React.Component {
  
    constructor(props) {
      super(props);
      console.log( 'props' );
      console.log( props.data );
    }
  
    render() {
      return (
        &lt;FormItem
          label = { &lt;label htmlFor="type"&gt;Category&lt;/label&gt; }
          field = { &lt;Field name="type" component={renderSelect} onChange={this.handleTypeChange} /&gt; }
        /&gt;
      );
    }
  }
  
  export default CategorySelects
  </code></pre>
  
  <p>And I add this to the the form with:</p>
  
  <pre><code>&lt;CategorySelects name="categories" /&gt;
  </code></pre>
  
  <p>What I'm not sure about is how to populate that select. Right now I just set initialValues on the UserForm with state.user.data. Do I need to merge in the state.category.data as well, or am I going about this the wrong way? Thanks!</p>