I am passing down 2 dispatchers to the same function in a child component. One passes correctly but the other does not.
// actions.js
export const log_to_console_function = () => ({ type : "logToConsole" });
export const set_donation_amount = (input_amount) => {
return {
type : "set_donation_amount",
payload : {
donation_amount : input_amount
}
}
}
// App.js
import {log_to_console_function, set_donation_amount} from "./actions";
const map_dispatch_to_props = (dispatch) => {
return {
dispatch_log_to_console_function: () => dispatch(log_to_console_function()),
dispatch_set_donation_amount : (amount) => set_donation_amount(amount)
}
};
// SelectDonation.js
import React from "react";
import store from "../reducer";
export default (props) => {
const save_donation_amount = (e) => {
// prevent pageload
// grab the custom amount
// add to state object
// done in parent
props.dispatch_set_donation_amount(e.target.value);
console.log(store.getState().donation_amount);
};
return (
<React.Fragment>
<Modal.Header>Choose an amount</Modal.Header>
<Modal.Content >
<Form>
<Form.Group className={field_group_style}>
<Form.Input
type='number'
placeholder='Custom Amount'
name='donation_amount'
id='custom_amount'
value={store.donation_amount}
/>
<Button
primary
onClick={(e) => save_donation_amount(e)}>Next Step</Button>
</Form.Group>
</Form>
</Modal.Content>
</React.Fragment>
)
}
Upon clicking the button I get the error telling me the props object is not passing the function:
TypeError: props.dispatch_set_donation_amount is not a function
save_donation_amount [as onClick]
src/components/SelectDonation.js:15
12 | // grab the custom amount
13 | // add to state object
14 | // done in parent
> 15 | props.dispatch_set_donation_amount(amount);
| ^ 16 | console.log(store.getState().donation_amount);
17 |
18 | };
Can you guys see the mistake?