mapDispatchToProps, id is not defined in action - react-native

Question

I get id is not defined in fetchEvents, when trying to use button.value as a parameter.
I am using mapDispatchToProps and mapStateToProps in my component.
const mapDispatchToProps = (dispatch) => {
return {
resetForm: () => dispatch(resetForm()),
fetchEvents: setSubCategory => dispatch(fetchEvents(id))
};
};
const mapStateToProps = state => {
return {
setCredentials: state.setCredentials,
categories: state.fetchCategories,
isLoading: state.isLoading
};
};
I then destructure my props to get my id:
const {
fetchEvents,
resetForm,
isLoading,
setCredentials: { setStudent, setGroup, setYear }
} = this.props;
const id = setStudent || setGroup || setYear;
However, when I dispatch my action:
const buttonOptions = [
{
key: 0,
label: "refresh",
value: Id,
icon: "undo"
},
{
key: 1,
label: "back",
value: Id,
icon: "caret-left"
}
];
return (
<View style={styles.container}>
{buttonOptions.map((button, i) => {
const style =
i == 0 ? styles.divContainerLeft : styles.divContainerRight;
return (
<View style={style} key={"view" + i}>
<TouchableOpacity
disabled={isLoading ? true : false}
key={"TouchableOpacity" + i}
// dispatch action here
onPress={i == 0 ? () => fetchEvents(button.value) : resetForm}
>
<Icon
name={button.icon}
style={styles.button}
color="white"
key={"icon" + i}
size={30}
/>
</TouchableOpacity>
</View>
);
})}
</View>
);

Answer 1

In your mapDispatchToProps, you are re-declaring the parameter name to setSubCategory, yet, in your fetch call you pass id.
Instead, try this:
const mapDispatchToProps = (dispatch) => {
return {
resetForm: () => dispatch(resetForm()),
fetchEvents: (setSubCategory) => dispatch(fetchEvents(setSubCategory))
};
};
OR
const mapDispatchToProps = (dispatch) => {
return {
resetForm: () => dispatch(resetForm()),
fetchEvents: (id) => dispatch(fetchEvents(id))
};
};
This is because you are declaring and inlining fetchEvents as an anonymous function. The parameter names must match.