Question 206927 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – 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)

Tags:

2

Answers


  1. 0

    The error message you’re encountering, "Cannot read properties of undefined (reading ‘classList’)," typically occurs when you’re trying to access a property of an undefined or null value. In your code, the error is related to the classList property, which means you’re attempting to access it on an undefined element.

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search