"Cannot read property 'state' of undefined" when trying to set and pass state props into a component

Question

So I have a component that I am trying to pass some state props down into. But for some reason I am getting the error Cannot read property 'state' of undefined but when I log each thing I am pushing, everything comes back with a result nothing is coming back undefined.

/*eslint-disable*/
import React from "react";
import FilterNow from "../../views/index-sections/filter";
import * as firebase from "firebase";

// reactstrap components
import {
  Card,
  CardHeader,
  CardBody,
  NavItem,
  NavLink,
  Nav,
  TabContent,
  TabPane,
  Row,
  Col,
} from "reactstrap";

import Tabs from "views/index-sections/Tabs";

// reactstrap components
import { Container } from "reactstrap";

window.addEventListener("load", function load(event) {
  const db = firebase.firestore();
  let citiesRef = db.collection("Live_Deals");
  let query = citiesRef
    .where("liveDiscountActive", "==", true)
    .get()
    .then((snapshot) => {
      if (snapshot.empty) {
        console.log("No matching documents.");
        return;
      }

      snapshot.forEach((doc) => {
        console.log(doc.id, "=>", doc.data());
        let allDeals = [];

        let deal = doc.data();

        let discountName = deal.liveDiscountName;
        let discountDesc = deal.liveDiscountDescription;
        let discountCat = deal.liveDiscountCategory;
        let discountDisp = deal.liveDiscountDispensary;
        let discountEdate = deal.liveDiscountEndDate;
        console.log("RUNNING");

        allDeals.push({

          discountName,
          discountDesc,
          discountCat,
          discountDisp,
          discountEdate,
        });
        this.setState({ data: allDeals }); 
      });
    })
    .catch((err) => {
      console.log("Error getting documents", err);
    });
});

// core components

function IndexHeaderHome() {
  let pageHeader = React.createRef();

  React.useEffect(() => {
    if (window.innerWidth > 991) {
      const updateScroll = () => {
        let windowScrollTop = window.pageYOffset / 3;
        pageHeader.current.style.transform =
          "translate3d(0," + windowScrollTop + "px,0)";
      };
      window.addEventListener("scroll", updateScroll);
      return function cleanup() {
        window.removeEventListener("scroll", updateScroll);
      };
    }
  });
  const [iconPills, setIconPills] = React.useState("1");
  const [pills, setPills] = React.useState("1");
  return (
    <>
      <div className="page-header clear-filter" filter-color="blue">
        <div
          className="page-header-image"
          style={{
            backgroundImage: "url(" + require("assets/img/header.jpg") + ")",
          }}
          ref={pageHeader}
        ></div>
        <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />{" "}
        <br /> <br /> <br />
        <Container>
          <div className="content-center brand">
            <h1 className="h1-seo">Get updates on the latest deals!</h1>
            <h3>Save money everyday with our live deal updates!</h3>
          </div>
        </Container>
        <Container>
          <FilterNow />
          {this.state.data.map((value, index) => (
            <Tabs
              DealName={value.discountName}
              DealDisc={value.discountDesc}
              DealEnd={value.discountEdate}
              DealCat={value.discountDesc}
              DealDisp={value.discountDisp}
            />
          ))}
        </Container>
      </div>
    </>
  );
}

export default IndexHeaderHome;

It says the error is:

105 FilterNow />

on that line which is weird. If I remove that component, it just says the error is now on Container> lol so its throwing the error above

  {this.state.data.map((value, index) => (

always.

I am pretty confused here.

If anyone has any ideas on what it could be that would be amazing, thanks for the help =]

Answer 1

You used this.setState({ data: allDeals }); not in a context of a class. the this in your window event id reffering to the function it self, not the window and not the state. You must create the function in the class it self and pass it with arrow function syntax ()=>{} , so the context of this will be the main component, and not the window.