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!

Hi, please edit this question and add more or new code. :) — Praveen Kumar Purushothaman
– Praveen Kumar Purushothaman, Commented Dec 7, 2021 at 18:13

Praveen Kumar Purushothaman · Accepted Answer · 2021-12-07 17:23:01Z

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>

answered Dec 7, 2021 at 17:23

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Ann-Kathrin Over a year ago

thank you so much for your quick answer! I updated the code as you wrote and don't get the error anymore, but the Pop Up still won't close. Do you maybe have any idea why that is?

Praveen Kumar Purushothaman Over a year ago

@Ann-Kathrin That could be because you have to unmount the popup. You might need to call setButtonPopUp(false); for that. Do you know how to do it? Do you have a CodeSandbox instance where we can try to work with the code?

Praveen Kumar Purushothaman Over a year ago

@Ann-Kathrin Can you please change: setTrigger={setButtonPopUp} to setTrigger={() => {setButtonPopUp(false);}}

Ann-Kathrin Over a year ago

I'm sorry, I can't get the code to be formatted nicely. I do not have a CodeSandbox Account right now but will look into it!

Ann-Kathrin Over a year ago

I added the code to the question :) and gave you the check!

|

Collectives™ on Stack Overflow

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

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related