title: Pass initialValue as prop to redux-form field
body: <p>There are lots of documents for redux-form, but none so far have helped with my particular setup. </p>
  
  <p><strong>End goal story</strong></p>
  
  <p>I want to pre-fill a profile form, eventually allowing data to be changed and sent back via the API.</p>
  
  <p><strong>Progress so far...</strong></p>
  
  <p>I can get the form to be pre-filled with static values in the form.js file. The next step is to replace these static values with the fetched data for that profile. I have the data ready and available for the profile on the index, I now need to pass this to the form.js and replace the static <code>initialValues</code>. However, the way the form.js file is structured its not as obvious to me how to pass this "prop" onto the <code>initialValues</code> tag.</p>
  
  <p><strong>INDEX.JS</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import { Provider } from "react-redux";
  import store from "./store";
  import MyForm from "./form";
  import { connect } from 'react-redux';
  import { whenGapiReady } from 'util/gapiHelper';
  import PropTypes from 'prop-types';
  import { fetchProfile } from 'actions/PlayerProfile';
  
  class UserProfilePage extends Component {
      constructor(props) {
          super(props);
      }
  
      static propTypes = {
          playerId: PropTypes.string
      }
  
      componentDidMount() {
          this.handleInitialize();
      }
  
      componentDidMount() {
          whenGapiReady(() =&gt; {
              const { fetchProfile } = this.props;
              const { playerId } = this.props.match.params;
              fetchProfile(playerId);
          });
      }
  
      componentDidUpdate(prevProps, prevState, snapshot) {
          if (this.props.hasOwnProperty('profile')) {
              if (this.props.profile.playerId !== prevProps.profile.playerId) {
                  // We only really need to reload the player if the playerId has changed
              }
          }
      }
  
      render() {
  
          const { playerId } = this.props.match.params;
          const { profile } = this.props;
  
          if (!playerId) {
              return null;
          }
  
          return (
  
              &lt;Provider store={store}&gt;                           
                  &lt;MyForm fullName={profile.fullName} /&gt;
              &lt;/Provider&gt;
  
          );
      }
  }
  
  const mapStateToProps = ({ playerProfile, settings }) =&gt; {
      const { loader, profile, profileError } = playerProfile;
      const { darkTheme } = settings;
      return { loader, profile, profileError, darkTheme };
  };
  
  export default connect(mapStateToProps, { fetchProfile })(UserProfilePage);
  </code></pre>
  
  <p>As you can see from above I am trying to pass the profile name here:</p>
  
  <pre><code>&lt;MyForm fullName={profile.fullName} /&gt;
  </code></pre>
  
  <p><strong>FORM.JS</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import { reduxForm, Field, FieldArray } from "redux-form";
  
  const renderfirstName = ({ fields }) =&gt; (
    &lt;div&gt;
      &lt;h3&gt;Player Profile:&lt;/h3&gt;
      {fields.map((playerProfile, index) =&gt; (
        &lt;div&gt;
          &lt;Field name={playerProfile} key={index} component="input" /&gt;
        &lt;/div&gt;
      ))}
      &lt;button type="button" onClick={() =&gt; fields.push()}&gt;Add more&lt;/button&gt;
    &lt;/div&gt;
  );
  const MyForm = ({ handleSubmit, fullName }) =&gt; (
    &lt;form onSubmit={ handleSubmit } initialValues={{fullName: fullName}}&gt;
      &lt;FieldArray name="fullName" component={renderfirstName} /&gt;
      &lt;button type="submit"&gt;Submit&lt;/button&gt;
    &lt;/form&gt;
  );
  export default reduxForm({
  
    form: "foo",
    enableReinitialize: true,
    onSubmit: values =&gt; {
      window.alert( "Submited: \n" + JSON.stringify( values, null, 2 ) );
    }
  })( MyForm );
  </code></pre>
  
  <p>I tried adding the <code>initialValues</code> tag directly onto the <code>&lt;form&gt;</code> tag:</p>
  
  <pre><code>&lt;form onSubmit={ handleSubmit } initialValues={{fullName: fullName}}&gt;
  </code></pre>
  
  <p>But initially I had the <code>initialValues</code> in the export like this:</p>
  
  <pre><code>export default reduxForm({
    form: "foo",
    initialValues: {
      playerProfiles: ['Tom Rudge']
    },
    onSubmit: values =&gt; {
      window.alert( "Submited: \n" + JSON.stringify( values, null, 2 ) );
    }
  })( MyForm );
  </code></pre>
  
  <p>With the initialValues set in the form.js export the form is pre-populated with the static value, its just getting that fetched value onto the form from its parent index that seems to be the issue. Any help appreciated.</p>