react error: "TypeError: Cannot read properties of undefined (reading 'props')"

Question

I am trying to make a popUp for each of my gallery items containing some information on the picture. Clicking on the picture and showing the pop up works fine, but I can't close it. I get the error that can be read in the title. I understand that there probably is an error regarding the sending of the "setButtonPopUp", but I couldn't understand it yet.

PopUp.js

import React from "react";
import "./PopUp.css";

export default function PopUp(props) {
  return props.trigger ? (
    <div className="popUpWrapper">
      <div className="popUp">
        <button
          className="closePopUp"
          onClick={onClick={props.setTrigger}}
        >
          close
        </button>
        {props.children}
      </div>
    </div>
  ) : (
    ""
  );
}

GalleryItem.js

import "./GalleryItem.css";
import TextItem from "../TextItem/TextItem.js";
import AlertMessage from "../alertMessage.js";
import PopUp from "../PopUp/PopUp.js";
import { useState } from "react";

export default function GalleryItem({ itemData }) {
  const [buttonPopUp, setButtonPopUp] = useState(false);
  if (itemData.polaroid === "light") {
    return (
      <div
        className="itemContainer"
        onClick={() => setButtonPopUp(true)}
      >
        <PopUp trigger={buttonPopUp} setTrigger={() => {
            setButtonPopUp(false);
          }}>
          <h3>Info</h3>
          <p>{itemData.info}</p>
        </PopUp>

        <img className="clip" src="../../assets/klammer.png" alt="" />
        <img className="polaroid" src="../../assets/polaroid.png" alt="" />
        <img className="image" src={itemData.src} alt="" />
        <h2 className="polaroidTitleLight">{itemData.title}</h2>
      </div>
    );
  } else if (itemData.polaroid === "dark") {
    return (
      <div
        className="itemContainer"
        onClick={() => AlertMessage(itemData.info)}
      >
        <img className="clip" src="../../assets/klammer.png" alt="" />
        <img className="polaroid" src="../../assets/polaroid_dark.png" alt="" />
        <img className="image" src={itemData.src} alt="" />
        <h2 className="polaroidTitleDark">{itemData.title}</h2>
      </div>
    );
  } else {
    return <TextItem itemData={itemData} />;
  }
}

What I did notice is that if I try to use the PopUp Component directly in App.js, the PopUp works just fine. But If I try to use it in SiteChanger it's not working anymore. This is the App.js:

App.js

import "./App.css";
import Header from "../Header/Header.js";
import SiteChanger from "../changeSite/changeSite.js";

function App() {
  return (
    <div>
      <Header />
      <SiteChanger />
    </div>
  );
}

export default App;

All help would be greatly appreciated!

Answer 1

You're not sending the prop setTrigger here:

  <div
    className="itemContainer"
    onClick={() => setButtonPopUp(true)}
    setTrigger={setButtonPopUp}             // Should go to down PopUp
  >
    <PopUp trigger={buttonPopUp}>
      <h3>Info</h3>
      <p>{itemData.info}</p>
    </PopUp>

Also, there's no this in functional components. It's just props. Here's the solution:

<button
  className="closePopUp"
  onClick={() => props.setTrigger(false)}
//---------------^^^^^                        // Update this
>

Send the props to correct component and not <div>:

  <div
    className="itemContainer"
    onClick={() => setButtonPopUp(true)}
    // setTrigger={setButtonPopUp}                              // Remove this and...
  >
    <PopUp trigger={buttonPopUp} setTrigger={setButtonPopUp}>   // Add here.
      <h3>Info</h3>
      <p>{itemData.info}</p>
    </PopUp>