CODEWITHSUNDEEP
react-nativeredux-form
railsuser400
railsuser400

Reputation: 1023

redux-form initialValues being created as a Map

I've got a redux-form and I'm trying to initialize the form using initialValues. Given the following code, the form isn't being populated with either the name or the age:

const EmployeesForm = reduxForm({
  form: 'addEmployee',
  enableReinitialize: true
})(EmployeesFormComponent)

export default connect((state, ownProps) => {
  const initialValues = { name: 'Jason', age: 24 }
  return {
    initialValues: initialValues
  }
})(EmployeesForm)

But in the web dev console when inspecting the next state on redux, I can see that form.values and form.initial are both Map objects that hold those initialValue values.

enter image description here

How should I be transforming the object so that it "fits" into the form. BTW I'm using: import { Field, reduxForm } from 'redux-form/immutable' and it's redux-form 6.8.0.

Upvotes: 7

Views: 461

Answers (2)

semuzaboi
semuzaboi

Reputation: 5172

As far as immutableJS goes , you should be able to get your initialValue as an object by using yourMap.toJS()

But you need not have to manually convert your Map to an object , as it is taken care of by redux-form/immutable , and as per redux-form docs

When you are using the immutable version of redux-form, the values that redux-form gives you for validation and submission will be in an Immutable.Map

In case you dont need the immutable map and all that jazz, i'd recommend go for the non-immutable version of reduxform .

Upvotes: 0

Appunni M
Appunni M

Reputation: 46

It could be a problem with your react-native Field definition.

<Field name="name" component={TextInput} />
<Field name="age" component={TextInput} />

Make sure this is the correct definition of your form. if you can please add the component Markup as well, so that it will become easy to debug.

Also one more tricky portion in react-native with redux-form is onChangeText callback instead of onChange so in order to account for that you will have to create a wrapper around the react-native TextInput component

const TextInputNative = ({ input: { onChange, ...inputProps }}) => {
    return <TextInput onChangeText={onChange} 
            {...inputProps} />
}

const EmployeesFormComponent = () => (
       <Field name="name" component={TextInputNative} />
       <Field name="age" component={TextInputNative} />
);

This also could be preventing your form from getting updated with initial values.

Upvotes: 2

Related Questions