React-Final-Form how to pass props location.search to function - reactjs

Question

I've been using React-Final-Form for the last few days but I have a lot of issues.
In my main function, PasswordReset, I need the take the prop 'location.search' and pass it to the custom 'handleSubmitOnClick' in order to handle the outcome on submit.
Here the main function:
const handleSubmitOnClick = ({ // I need the location.search to be passed here as prop
password,
password_confirmation,
}) => {
const url = 'http://localhost:3000/api/v1/users/passwords';
const headers = {
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
}
}
const data = {
"user": {
"reset_password_token": location.search,
"password": password,
"password_confirmation": password_confirmation,
}
}
axios.post(url, data, headers)
.then(response => console.log(response))
.catch(error => console.log('error', error)))
}
const PasswordReset = ({
location //<==== I need to pass this to 'handleSubmitOnClick' function
}) =>
<Fragment>
<h1>Password Reset page</h1>
<Form
onSubmit={handleSubmitOnClick}
decorators={[focusOnError]}
>
{
({
handleSubmit,
values,
submitting,
}) => (
<form onSubmit={handleSubmit}>
<Field
name='password'
placeholder='Password'
validate={required}
>
{({ input, meta, placeholder }) => (
<div className={meta.active ? 'active' : ''}>
<label>{placeholder}</label>
<input {...input}
type='password'
placeholder={placeholder}
className="signup-field-input"
/>
{meta.error && meta.touched && <span className="invalid">{meta.error}</span>}
{meta.valid && meta.dirty && <span className="valid">Great!</span>}
</div>
)}
</Field>
<Field
name='password_confirmation'
placeholder='Confirm password'
validate={required}
>
{({ input, meta, placeholder }) => (
<div className={meta.active ? 'active' : ''}>
<label>{placeholder}</label>
<input {...input}
type='password'
placeholder={placeholder}
className="signup-field-input"
/>
{meta.error && meta.touched && <span className="invalid">{meta.error}</span>}
{meta.valid && meta.dirty && <span className="valid">Great!</span>}
</div>
)}
</Field>
<button
type="submit"
className="signup-button"
disabled={submitting}
>
Submit
</button>
</form>
)}
</Form>
</Fragment>
export default PasswordReset;
Any help is REALLY appreciated. A bad answer is better than no answers. Thanks in advance.

Answer 1

You can curry your function to have location updated everytime.
Currying method: (preferred by linters)
const handleSubmitOnClick = (location) => ({ //location would come from PasswordReset every time there's a re-render
^^^^^^^^
password,
password_confirmation,
}) => {
...
}
const PasswordReset = ({
location //<==== I need to pass this to 'handleSubmitOnClick' function
}) =>
<Fragment>
<h1>Password Reset page</h1>
<Form
onSubmit={handleSubmitOnClick(location)} // <--- This will update location on every re-render
decorators={[focusOnError]}
>
{ ... }
</Form>
</Fragment>
export default PasswordReset;
Inline function method:
Alternatively you can use what other answer provided but you still need to update your handleSubmitOnClick function to accept your location prop. It will create new function on every re-render, but because inline functions are bad practice deemed by linters I prefer currying method.
<Form
onSubmit={() => handleSubmitOnClick(location)} // <--- This will create new function on every re-render
decorators={[focusOnError]}
>

Answer 2

<Form
onSubmit={() => handleSubmitOnClick(location)}
decorators={[focusOnError]}
>
Wrap it in an anonymous function that once called, calls your function with the required param, which would be location in this case.
After that the function would have an extra argument:
handleSubmitOnClick = location => ({..props})