CODEWITHSUNDEEP
javascriptreactjs
Utku Ergün
Utku Ergün

Reputation: 1

i am getting error that Cannot read properties of undefined (reading 'classList')

import { useCollectionData } from "react-firebase-hooks/firestore";
import { collection, deleteDoc, doc } from "firebase/firestore";
import db from "../../firebase";
import { useGlobalContext } from "../../context";
import styles from "./childreList.module.css";
import { PiDotsThreeOutlineVerticalDuotone } from "react-icons/pi";
import { GoTrash } from "react-icons/go";
const ChildrenList = ({ path }) => {
  const { value, categoryName } = useGlobalContext();
  const query = collection(db, path);
  const [docs, loading, error] = useCollectionData(query);
  // console.log(docs);
  const handleDeleteSubCollection = async (uuid) => {
    await deleteDoc(
      doc(db, `users/${value.uid}/children/${categoryName}/children2/${uuid}`)
    );
  };
  const handleOnMouseLeaveDetailButton = (e) => {
    e.target.children[1].classList.remove(styles.detail_button_active);
  };
  const handleOnMouseEnterDetailButton = (e) => {
    e.target.children[1].classList.add(styles.detail_button_active);
    console.log(e.target.children);
  };
  const handleOnClickAdd = (e) => {
    console.log(e.target.previousSibling);
    e.target.nextSibling.classList.add(styles.delete_button_active);
  };
  const handleOnMouseLeaveRemove = (e) => {
    e.target.nextSibling.classList.remove(styles.delete_button_active);
  };
  return (
    <div className={styles.container}>
      {docs?.map((item, index) => {
        return (
          <div
            onMouseEnter={handleOnMouseEnterDetailButton}
            onMouseLeave={handleOnMouseLeaveDetailButton}
            className={styles.container_single_card}
            key={index}
          >
            <div className={styles.word_part}>
              {item.englishWord}
              {/* {item.turkishWord} */}
            </div>
            {/* details */}
            <button
              className={styles.detail_button}
              onClick={handleOnClickAdd}
              onMouseLeave={handleOnMouseLeaveRemove}
            >
              <PiDotsThreeOutlineVerticalDuotone />
            </button>
            {/* delete */}
            <button
              className={styles.delete_button}
              onClick={() => handleDeleteSubCollection(item.uuid)}
            >
              <GoTrash />
            </button>
          </div>
        );
      })}
    </div>
  );
};
export default ChildrenList;

How can i fix this error? Cannot read properties of undefined (reading 'classList') TypeError: Cannot read properties of undefined (reading 'classList')at handleOnMouseEnterDetailButton (http://localhost:3000/main.d6f.hot-update.js:55:26) at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:58621:18)

Upvotes: 0

Views: 110

Answers (1)

rainversion_3
rainversion_3

Reputation: 967

The error is stating that it's trying to access the classList property of an undefined value within the handleOnMouseEnterDetailButton function. The error is thrown because e.target.children[1] is undefined.

In your handleOnMouseEnterDetailButton and handleOnMouseLeaveDetailButton methods, you're attempting to access the children[1] of the event target. If the target element doesn't have a second child (i.e., an element at index 1), then children[1] will return undefined

To prevent crashing of the application due to this error, you can check if children[1] exists this way

const handleOnMouseLeaveDetailButton = (e) => {
  if(e.target.children[1]) {
    e.target.children[1].classList.remove(styles.detail_button_active);
  }
};

const handleOnMouseEnterDetailButton = (e) => {
  if(e.target.children[1]) {
    e.target.children[1].classList.add(styles.detail_button_active);
  }
};

Remember, if there is no second child .. your logic inside the if block is skipped

Upvotes: 0

Related Questions