How do you pass a prop to an onChange function in Redux-Form?

Question

So say I have the following component (this is pseudo code, but should illustrate my problem in a much shorter reading format hopefully)...

class Example extends React.Component {
  onChange = () => {
    store.dispatch({ type: 'FETCH_VENUE', location: locationValue })
  }

  render() {
    console.log(this.props.id) // "2"
    return (
      <Field id="salesArea" name="orderHeader.salesArea" type="select" onChange={this.onChange}
             component={SelectComponent} />
    )
  }
}

export default Example;

If I have a prop from the Container component ExampleContainer that provides a value at this.prop.id. How can I pass this as locationValue so basically the equivalent of

location: this.props.id

without creating an anti-pattern.

this.props.id uses formValueSelector in the HOC to return the current value of salesArea.

My code works great if I set location: '2' for instance, but is there a way to pass a prop into this dispatch?

Answer 1

For anyone that stumbles upon this. I solved it as follows.

I added the following function in the simple Form component.

onVenueChange = (event, venueId) => {
    console.log(venueId);
    this.props.onVenueChange(venueId)
}

I then call it like this in the < Field />

call onChange={this.onVenueChange}

In an HOC as part of mapDispatch I have the following. Which dispatches the action.

onVenueChange: venueId => dispatch({type: 'FETCH_EDITABLEORDERS', venueId: venueId })