Using param in redux form hidden field - redux

Question

I am looking to add reset password ability to an auth app in redux. The server sends out an email and puts a token in the params. I am trying to use a hidden field to store the param value that will need to be submitted back to the server. The problem is redux form doesn't seem to be picking up the value and is passing undefined. I am alittle new to redux form and know this isnt yet at v6. My plan is to get all the functionality for the auth built first then upgrade
import React, { Component } from 'react';
import { reduxForm } from 'redux-form';
import * as actions from '../../actions';
class Resetpassword extends Component {
componentWillMount() {
this.props.clearErrorMsg();
}
handleFormSubmit(formProps) {
// Call action creator to sign up the user!
this.props.resetPassword(formProps);
}
renderAlert() {
if (this.props.errorMessage) {
return (
<div className="alert alert-danger">
<strong>Oops!</strong> {this.props.errorMessage}
</div>
);
}
}
render() {
const { handleSubmit, fields: { password, passwordConfirm, token }} = this.props;
console.log(this.props.location.query.reset);
return (
<form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
<fieldset className="form-group">
<label>Password:</label>
<input className="form-control" {...password} type="password" />
{password.touched && password.error && <div className="error">{password.error}</div>}
</fieldset>
<fieldset className="form-group">
<label>Confirm Password:</label>
<input className="form-control" {...passwordConfirm} type="password" />
{passwordConfirm.touched && passwordConfirm.error && <div className="error">{passwordConfirm.error}</div>}
</fieldset>
<input className="form-control" value={this.props.location.query.reset} {...token} type="hidden" />
{this.renderAlert()}
<button action="submit" className="btn btn-primary">Sign up!</button>
</form>
);
}
}
function validate(formProps) {
const errors = {};
if (!formProps.password) {
errors.password = 'Please enter a password';
}
if (!formProps.passwordConfirm) {
errors.passwordConfirm = 'Please enter a password confirmation';
}
if (formProps.password !== formProps.passwordConfirm) {
errors.password = 'Passwords must match';
}
return errors;
}
function mapStateToProps(state) {
return { errorMessage: state.auth.error };
}
export default reduxForm({
form: 'resetpassword',
fields: ['password', 'passwordConfirm','token'],
validate
}, mapStateToProps, actions)(Resetpassword);

Answer 1

The solution I found which may not follow best practices is to remove the hidden field and pass the query string prop into the action handleFormSubmit
handleFormSubmit(formProps) {
// Call action creator to sign up the user!
this.props.resetPassword(formProps,this.props.location.query.reset);}
Then having the action deal with it