Redux form defaultValue Redux form defaultValue reactjs reactjs

Redux form defaultValue


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


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


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} />    )  }}