This.props undefined React-CodePudding

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);

CodePudding user response：

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