can i get initialValues passed from props?

[ghost]

i have this redux-form code:

export default reduxForm({
    form: 'form',
    fields,
    initialValues: {
        first_name: 'test'
    },
    validate
})(MyForm)

i want to pass the initialValues from MyForm.props.initialValues.
how can i access my components props?

[juanpaco]

The mapStateToProps mentioned here option will help you with this.

Basically, you make a function such as:

function mapStateToProps(state, ownProps) {
  // state will be the state of your redux store
  // ownProps will be your component's props
}

This function needs to return a plain object. This object gets merged into your components props.

Well, if you return an object with key initialValues, your form instance will use those as the initial values. So, you can remove the initialValues from your example above and get something like the following:

function mapStateToProps(state, ownProps) {
  return {
    initialValues: {
      first_name: ownProps.propThatHasFirstName
    }
}

export default reduxForm({
    form: 'form',
    fields,
    validate
}, mapStateToProps)(MyForm)

Notice that mapStateToProps is now also passed as an argument to your reduxForm call.

Hope that helps!

[thomasmery]

I might not understand the question but can't you just do

<MyForm initialValues={myFormData} />

?

[erikras]

I, too, am not 100% sure what you mean, but I'm going to guess.

The initialValues prop is "consumed" by the redux-form HOC (not passed through). However, you are free to pass the same values via any other prop, which will get passed through.

<MyForm
  initialValues={myFormData} // <--- will be used and not passed through
  initialValuesToPassThru={myFormData}/> // <--- will be ignored and passed through

[ghost]

thank you for your answers.
im running version 5.2.3, and i couldn;t get it to work.

the MyForm component sits under a route, and renders:

return (
    <form initialValues={{ Country: "US" }} onSubmit={handleSubmit}>
    ...
    </form>
)

should i pass the props from outside the component?

p.s. @juanpaco 's answer works great, but i'd rather @erikras ' approach

[thomasmery]

as far as I know you can either pass your initialValues as a prop when declaring your component in its container as @erikras has stated

or you can use mapStateToProps in your component definition as @juanpaco has explained

does that help?

[erikras]

<form initialValues={{ Country: "US" }} onSubmit={handleSubmit}>
// ^^ No, that's the React.DOM.form component. You need to pass it to your
// decorated component, the result of using reduxForm() on the component
// that this render() method is in.

[ghost]

yes, it did help. thank you guys

[gkatsanos]

@erikras is this still actual?

import React from 'react';
import { Field, reduxForm } from 'redux-form';

const ModifyItemBody = ({ handleSubmit, body }) => (
  <form onSubmit={handleSubmit} initialValues={{newbody: body}}>
    <Field name="newbody" component="input" type="text"/>
    <button type="submit">Submit</button>
  </form>
);

export default reduxForm({
  form: 'modifyItem', // a unique name for this form
  enableReinitialize: true
})(ModifyItemBody);

Warning: Unknown prop `initialValues` on <form> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in form (at ModifyItemBody.js:5)
    in ModifyItemBody (created by Form(ModifyItemBody))
    in Form(ModifyItemBody) (created by Connect(Form(ModifyItemBody)))
    in Connect(Form(ModifyItemBody)) (created by ReduxForm)
    in ReduxForm (at Movie.js:10)
    in div (at Movie.js:5)
    in Movie (at MovieList.js:41)
    in div (at MovieList.js:37)
    in MovieList (created by Connect(MovieList))
    in Connect(MovieList) (at App.js:10)
    in div (at App.js:9)
    in App (at index.js:17)
    in Provider (at index.js:16)

"redux-form": "^6.6.3",

[gkatsanos]

Ah ok, I needed to pass the actual prop when the Component was called:

<ModifyItemBody body={body} onSubmit={handleSubmit} editmode={!editmode} id={id} initialValues={{newbody: body}} />

@erikras do you mind adding this way of passing initialValues to the documentation/FAQ? I didn't see it anywhere and it seems that the only way possible (still by digging the issue tracker) is the use the config/mapStateToProps .. (looked for that for 3-4h :( )

[erikras]

@gkatsanos Perhaps the IMPORTANT: All of these configuration options may be passed into reduxForm() at "design time" or passed in as props to your component at runtime. could be in a bigger font? That line does cover what you're talking about, right? I'm open to suggestions of how to make the docs clearer. What would you write, and where?

[gkatsanos]

Hey Erik, you're right actually in both things:) it's there but yes the fonts are overall rather problematic.. :

If the repo for the website is open-sourced I'd like to offer a PR for the CSS/styling with minor tweaks, and also I'd add a line in the FAQ as initialValues seem to be a popular question.
Also, "may be passed into reduxForm().. or passed in as props to your component.." is good, but:
<MyForm initialValues:{{myFieldName: 'initial-value'}}> says a lot more without having to explain so much :) The addition of an actual very simple example would be super helpful.
But I think the most important problem of the docs is the lack of a well-functioning search ( look at theirs : https://vuejs.org/v2/guide/ ) .. I had to google in order to find something in the docs :/
again, willing to help if the website's in a repo!

[oskaryil]

@thomasmery Thanks, your solution worked!

[gustavohenke]

Late answer to #916 (comment): it's open source. Just look at the other available branches here :)
The contents of the docs are markdown files you can find in the master branch.

cc @gkatsanos

[mddrill]

The mapStateToProps doesn't seem to work.

[mddrill]

Nevermind. I just had to reverse the order of connect and reduxForm like in this answer https://stackoverflow.com/a/48855532/5605365