Here is the relevant code:

const Members = () => {
  // array of each video in selected grade
  const videosMap = (videos) => {
    return videos.map((video) => (
      <VideoCard
        key={video.id}
        thumbnail={video.thumbnail}
        title={video.title}
        description={video.description}
        onClick={() => {
          handleVideoClick();
        }}
      />
    ));
  };

  // updates state of shown videos & page heading
  const handleGradeButtonClick = (videos, heading) => {
    setShowVideos(videosMap(videos));
    setVideosHeading(heading);
  };

  const handleVideoClick = () => {
    console.log("test");
  };

  // controls state of which grade's videos to show
  const [showVideos, setShowVideos] = useState(videosMap(kinder_videos));
  // controls states heading to display depending on selected grade
  const [videosHeading, setVideosHeading] = useState("Kindergarten");

  const [showVideoDetails, setShowVideoDetails] = useState(null);

The handleVideoClick is the function that is not working when I click on one of the mapped VideoCard components.

Here is the full code if you want to see that: https://github.com/dblinkhorn/steam-lab/blob/main/src/components/pages/Members.js

When I look in React DevTools at one of the VideoCard components, it shows the following:

onClick: *f* onClick() {}

If I don't wrap it in an arrow function it does execute, but on component load instead of on click. I have a feeling it has something to do with my use of .map to render this component, but haven't been able to figure it out.

Thanks for any help!