This.props undefined React - reactjs

Question

I have a problem that i'm sure isn't that incredibly complicated but i'm lost on it. I have looked at the other stack answers and I'm still just as lost hoping someone a fresh set of eyes from someone who knows react can give me a hand. What i'm trying to do is return a modal on click. The issue i'm facing is the props being undefined and when I click I get nothing.
const Collection = ({
isLoading,
cues = [],
id,
loadCollection,
onSave,
onRemove,
savedCount,
}) => {
useEffect(() => loadCollection(id), [loadCollection, id]);
const [collection, setCollection] = useState({});
const isMounted = useIsMounted();
const getCollectionData = useCallback(() => {
client.get(`collections/${id}`).then(r => {
if (isMounted.current) setCollection(r.data);
});
}, [id, isMounted, setCollection]);
useEffect(getCollectionData, [id, savedCount]);
return collection.id ? (
<CueList
isLoading={isLoading}
cues={cues}
defaultProps = {cues}
title={collection.name}
description={collection.description}
image={collection.image_src}
isSaved={collection.is_saved}
onSave={() => onSave(id)}
onRemove={() => onRemove(id)}
withVersionsDropdown
buttons={[
{
title: 'Share Playlist', //issue is right in here
Icon: props => (
<Share {...props} width={15} height={15} noMargin />
),
onClick: () =>
this.props.onSharePlaylistModal(this.props.playlist),
},
]}
/>
) : (
<Loading />
);
};
Collection.propTypes = {
cues: PropTypes.array,
loadCollection: PropTypes.func.isRequired,
onSave: PropTypes.func.isRequired,
onRemove: PropTypes.func.isRequired,
isLoading: PropTypes.bool.isRequired,
id: PropTypes.number.isRequired,
onSharePlaylistModal: PropTypes.func.isRequired,
savedCount: PropTypes.number.isRequired,
};
const mapStateToProps = ({ pageDisplay, cues, sidebar }, { match }) => {
const id = parseInt(match.params.id);
return {
savedCount: sidebar.savedCollections.length,
isLoading: pageDisplay.isLoading,
cues: getCues({
...cues,
sortBy: pageDisplay.sortBy,
sortInBackEnd: false,
}),
id,
};
};
const mapDispatchToProps = (
dispatch,
) => ({
loadCollection: id => {
dispatch(actions.LOAD_COLLECTION(id));
},
onSave: id => {
dispatch(actions.SAVE_COLLECTION(id));
},
onRemove: id => {
dispatch(actions.REMOVE_COLLECTION(id));
},
openSharePlaylistModal: data => {
dispatch(actions.OPEN_MODAL(actions.SHARE_PLAYLIST(undefined, data)));
},
});
export default connect(
mapStateToProps,
mapDispatchToProps,
)(Collection);

Answer 1

This part seems problematic
{
title: 'Share Playlist',
Icon: props => (
<Share {...props} width={15} height={15} noMargin />
),
onClick: () =>
this.props.onSharePlaylistModal(this.props.playlist),
}
Currently you probably have an error in the console when you click on the button
Since you are in a functional component, you are not expected to use the keyword this
The props onSharePlaylistModal and playlist should be accessible from the argument
const Collection = ({
isLoading,
cues = [],
id,
loadCollection,
onSave,
onRemove,
savedCount,
onSharePlaylistModal, // <= here
playlist
}) => {
...
As a side note, it feels like you are looking at old and deprecated react/redux tutorial and mixing things up.
connect is rather old fashioned and it is probably preferable to use hooks
this.props is used in class component and not functional component