Redux forms defaultValue

Question

How to install defaultValuefor component input?

<Field name={`${prize}.rank`} defaultValue={index} component={Input} type='text'/>

I tried as above, but my fields are empty

I am trying to create a fieldArray (dynamic forms)

{fields.map((prize, index) =>
                <div key={index} className="fieldArray-container relative border-bottom" style={{paddingTop: 35}}>
                    <small className="fieldArray-title marginBottom20">Prize {index + 1}
                        <button
                            type="button"
                            title="Remove prize"
                            className="btn btn-link absolute-link right"
                            onClick={() => fields.remove(index)}>Delete</button>
                    </small>
                    <div className="row">
                        <div className="col-xs-12 col-sm-6">
                            <Field name={`${prize}.rank`}  defaultValue={index} component={Input} type='text'/>
                            <Field name={`${prize}.prizeId`} defaultValue={index} component={Input} type='text'/>
                            <Field
                                name={`${prize}.name`}
                                type="text"
                                component={Input}
                                label='Prize Name'/>
                        </div>
                        <div className="col-xs-12 col-sm-6">
                            <Field
                                name={`${prize}.url`}
                                type="text"
                                component={Input}
                                label="Prize URL"/>
                        </div>
                        <div className="col-xs-12">
                            <Field
                                name={`${prize}.description`}
                                type="text"
                                component={Input}
                                label="Prize Description" />
                        </div>
                    </div>
                </div>
            )}

Answer 1

In reduction forms, you can call the initialize()following values ​​with an object:

class MyForm extends Component {
  componentWillMount () {
    this.props.initialize({ name: 'your name' });
  }

  //if your data can be updated
  componentWillReceiveProps (nextProps) {
    if (/* nextProps changed in a way to reset default values */) {
      this.props.destroy();
      this.props.initialize({…});
    }
  }

  render () {
    return (
      <form>
       <Field name="name" component="…" />
      </form>
    );
  }
}

export default reduxForm({})(MyForm);

This way you can update the default values ​​over and over, but if you just need to do it the first time, you can:

export default reduxForm({values: {…}})(MyForm);

Answer 2

There is an example in this jsfiddle

https://jsfiddle.net/bmv437/75rh036o/

const renderMembers = ({fields}) => (
    <div>
    <h2>Members</h2>
    <button onClick={() => fields.push({})}>add</button><br />
      {fields.map((field, idx) => (
        <div className='member' key={idx}>
        First Name
        <Field name={`${field}.firstName`} component='input' type='text' /><br />
        Last Name
        <Field name={`${field}.lastName`} component='input' type='text' /><br />
            <button onClick={() => fields.remove(idx)}>remove</button><br />
        </div>
    ))}
    </div>
)

const Form = () => (
  <FieldArray name='members' component={renderMembers} />
)

const MyForm = reduxForm({
    form: 'foo',
  initialValues: {
    members: [
        {
        firstName: "myFirstName"
      }
    ]
  }
})(Form)