Redux form defaultValue

Question

How to set defaultValue to input component?

<         


        

Answer 1

this is my implementation using a HoC

import { Component } from 'react'
import {
  change,
} from 'redux-form'

class ReduxFormInputContainer extends Component{
  componentDidMount(){
    const {
      initialValue,
      meta,
    } = this.props
    if(initialValue === undefined || meta.initial !== undefined || meta.dirty) return
    const {
      meta: { form, dispatch },
      input: { name },
    } = this.props
    dispatch(change(form, name, initialValue))
  }
  render(){
    const {
      initialValue,
      component: Compo,
      ...fieldProps
    } = this.props
    return <Compo {...fieldProps} />
  }
}

function reduxFormInputContainer(component){
  return function(props){
    return <ReduxFormInputContainer {...props} component={component} />
  }
}

export default reduxFormInputContainer

and then for exemple:

import reduxFormInputContainer from 'app/lib/reduxFormInputContainer'

InputNumericWidget = reduxFormInputContainer(InputNumericWidget)

class InputNumeric extends Component{
  render(){
    const props = this.props
    return (
      <Field component={InputNumericWidget} {...props} />
    )
  }
}

Answer 2

On redux forms you can call initialize() with an object of values like so:

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 again, but if you just need to do it at the first time you can:

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

Answer 3

This jsfiddle has an example

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);