My functional component accepts a function called addEvent, which expects an event parameter. The problem arises when I try to call this function from props within another functional component, as the function does not seem to execute:
const onOk = () => {
const { title, description, start_time, end_time, remind_time } = formStates;
const event = {
title:title[0],
description:description[0],
start_time:start_time.toISOString(),
end_time: end_time.toISOString(),
remind_time: remind_time.toISOString()
}
props.addEvent(event);
props.hideModal();
};
const ModalConductor = props => {
switch(props.modal.currentModal) {
case EVENT_FORM_MODAL:
return <EventsFormModal {...props} title="New Event" addEvent={addEvent}/>
default:
return null;
}
};
Function Being Passed:
export const addEvent = (event) => dispatch => {
console.log(event);
axios
.post('/api/events/', event)
...then(res => {
dispatch({
type: ADD_EVENT,
payload: res.data
});
}).catch(err => console.log(err));
}
I have come across information in the React documentation suggesting that when passing functions to components, one should use
this.function = this.function.bind(this);this in a functional component and the documentation lacks examples. How can I resolve this issue? Any assistance would be greatly appreciated!