Redux-form: How to set initialvalues on a wizard form?

Question

I have a field Location, that is a mandatory field for yhe API, so can't be submitted blank. So I am trying to set 0 as initialValue for the field. the Location field is on the second step of the form and setting initialValues on WizardFormSecondPage removes all input previous input data from the state. How do I set the initialValue for the Location field and keep all my data put in the first step?

Location component:

export class GetLocation extends Component{
constructor(){
    super();
    this.getMyLocation = this.getMyLocation.bind(this);
}


getMyLocation = () => {
    const location = window.navigator && window.navigator.geolocation;

    if (location) {
        location.getCurrentPosition((position) => {
            this.props.onLocationChanged(position.coords);
        },
            (positionError) => {
            console.log(positionError.message);
            this.props.onLocationChanged("0")
        },{maximumAge:0, timeout: 60000})
    } else {
        console.log();
        this.props.onLocationChanged("0")
    }
};

render(){
    return(
        <div>
            <p>Your location is </p>
            <Field
                name="latitude"
                component="input"
                className="form-control" initialValues={0.0}
            />
            <Field
                name="longitude"
                component="input"
                className="form-control"
            /><br/>
            <button type="button" className="btn btn-success" onClick={this.getMyLocation.bind(this)}>Get Geolocation</button>
        </div>

    );
}

}

WizardFormSecondPage

 let WizardFormSecondPage = props => {
 const { handleSubmit, previousPage} = props;
 const onLocationChanged = (loc) => {
    props.change('location.latitude', loc.latitude);
    props.change("location.longitude", loc.longitude);
};

return (
<form onSubmit={handleSubmit} className="form-horizontal">
  <div className="panel">
    <div className="form-group">
      <label className="control-label col-sm-2" htmlFor="address">
        Location
      </label>
        <div className="row">
          <div className="col-sm-12">
              <p className="label-lead">Own Address</p>
                 <FormSection name="location" component={Address}>
                    <Address />
                </FormSection>

              <p className="label-lead">Location Coordinates</p>
              <FormSection name="location" component={GetLocation}>
                  <GetLocation onLocationChanged={onLocationChanged}  />
              </FormSection>
          </div>
        </div>
      </div>              
  </div>

  <div className="clearfix">
      <button type="button" className="previous pull-left btn btn-default" onClick={previousPage}>
        Previous
      </button>
      <button type="submit" className="next pull-right btn btn-primary">
        Next
      </button>
    </div>
  </div>
</form>
  );
};

export default reduxForm({
  form: "wizard", //                 <------ same form name
  destroyOnUnmount: false, //        <------ preserve form data
  forceUnregisterOnUnmount: true, // <------ unregister fields on unmount
  validate
})(WizardFormSecondPage);

Any help is much appreciated.

Answer 1

Turns out, my approach was wrong. I could set an initialValue to the entire WizardForm and it would not initialize again. So, in stead of trying to set initialize WizardFormSecondPage, I had to set values on WizardForm.js. Here's my WizardForm.js:

class WizardForm extends Component {
  constructor(props) {
    super(props);
    this.nextPage = this.nextPage.bind(this);
    this.previousPage = this.previousPage.bind(this);
    this.state = {
      page: 1,
    };
  }

  nextPage() {
    this.setState({ page: this.state.page + 1 });
  }

  previousPage() {
    this.setState({ page: this.state.page - 1 });
  }

  onSubmit(values, dispatch) {
    return dispatch(saveData(values));
    // Call the action creator which is responsible for saving data here.
  }

  render() {
    const { onSubmit } = this.props;
    const { page } = this.state;
    return (
      <div>
        {page === 1 && <WizardFormFirstPage onSubmit={this.nextPage} />}
        {page === 2 &&
          <WizardFormSecondPage
            previousPage={this.previousPage}
            onSubmit={this.nextPage}
          />}

        {page === 3 &&
          <WizardFormPreview
            previousPage={this.previousPage}
            onSubmit={this.onSubmit}
          />}
      </div>
    );
  }
}

WizardForm.propTypes = {
 onSubmit: PropTypes.func.isRequired,
};

// this part sets the initial values. connect if you need store.
WizardForm = reduxForm ({
  form: 'wizard',
  initialValues: {
    location: {
     latitude: "0.0",
     longitude: "0.0"
   }
  }
})(WizardForm)


export default WizardForm;