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

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]}
    >