Click here to Skip to main content
15,562,223 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
Why am i getting this error here :
here is my home.js :
<pre>import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { v4 } from "uuid";
import { auth, database } from "./firebase";
import "./Home.css";
import bigProfileImg from "./icons/account-circle-line.svg";
import Modal from "./Modal.js";
import Navbar from "./Navbar";
import dogPost1 from "./Photos/dog-img-1.jpg";
import dogPost2 from "./Photos/dog-img-2.jpg";
import dogPost3 from "./Photos/dog-img-3.jpg";
import dogPost4 from "./Photos/dog-img-4.jpg";
import dogPost5 from "./Photos/dog-img-5.jpg";
import dogPost6 from "./Photos/dog-img-6.jpg";

import { onValue } from "firebase/database";
import { ref as myRef } from "firebase/storage";
import settingsImg from "./icons/settings-line.svg";
import reelsImg from "./Photos/reels-icon.webp";
function Profile() {
  const [users, setUsers] = useState([]);
  const navigate = useNavigate();
  const [usernameValue, setUsernameValue] = useState("");
  const [bioValue, setBioValue] = useState("");
  const [nameValue, setNameValue] = useState("");
  const [phoneNumberValue, setPhoneNumberValue] = useState("");

  useEffect(() => {
    auth.onAuthStateChanged((user) => {
      user ? navigate("/") : navigate("/login");
    });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  useEffect(() => {
    onValue(myRef(database, "/users/devcontractoruhkgmailcom/"), (snapshot) => {
      console.log(snapshot.val());
    });
  });
  const [openModal, setOpenModal] = useState(false);

  function hidden() {
    if (document.getElementById("hidden").style.visibility === "visible") {
      document.getElementById("hidden").style.visibility = "hidden";
      document.getElementById("move").style.marginLeft = "59.8%";
      document.getElementById("visible-content").style.visibility = "visible";
    } else {
      document.getElementById("hidden").style.visibility = "visible";
      document.getElementById("move").style.marginLeft = "36.65%";
      document.getElementById("visible-content").style.visibility = "hidden";
    }
  }

  return (
    <>
      <Navbar />
      <div className="top_left_img">
        <img className="profile-img" src={bigProfileImg} alt="" />
      </div>

      <div className="top_mid_user-details">
        <div className="username_settings">
          {}
          <img
            onClick={() => {
              setOpenModal(true);
            }}
            className="settings_icon"
            src={settingsImg}
            alt=""
          />
        </div>
        <br />
        <div className="post_follower_following_counter">
          <div className="post-counter">0 posts</div>
          <div className="follower-counter">0 followers</div>;
          <div className="following-counter">0 following</div>
        </div>
        <div className="name_description">
          {users.map((user) => {
            return (
              <p key={v4()} className="name">
                {user.name}
              </p>
            );
          })}
          {users.map((user) => {
            return (
              <p key={v4()} className="description">
                {user.description}
              </p>
            );
          })}
        </div>
      </div>

      <div className="line1"></div>
      <br />
      <div className="line2" id="move"></div>

      <div className="nav2">
        <div className="nav2_post" onClick={hidden}>
          <div className="nav2_post-icon">
            <div className="box-1"></div>
            <div className="box-2"></div>
            <div className="box-3"></div>
            <div className="box-4"></div>
            <div className="box-5"></div>
            <div className="box-6"></div>
            <div className="box-7"></div>
            <div className="box-8"></div>
            <div className="box-9"></div>
          </div>
          POSTS
        </div>
        <div className="nav2_reels" onClick={hidden}>
          <img className="nav2_reels-icon" src={reelsImg} alt="" />
          REELS
        </div>
      </div>

      <div className="all_user_posts" id="hidden">
        <div className="post">
          <img className="post-1" src={dogPost1} alt="" />
        </div>
        <div className="post">
          <img className="post-2" src={dogPost2} alt="" />
        </div>
        <div className="post">
          <img className="post-3" src={dogPost3} alt="" />
        </div>
        <div className="post">
          <img className="post-4" src={dogPost4} alt="" />
        </div>
        <div className="post">
          <img className="post-5" src={dogPost5} alt="" />
        </div>
        <div className="post">
          <img className="post-6" src={dogPost6} alt="" />
        </div>
      </div>

      <div className="all_user_reels" id="visible-content">
        <img className="reels-icon-2" src={reelsImg} alt="" />
        <p> No reels has been uploaded here!</p>
      </div>

      {openModal && <Modal closeModal={setOpenModal} />}
    </>
  );
}

export default Profile;


In the error it is pointing out the onValue but i have used onValue in App.js also but it does not give me any error so what am i doing wrong here

What I have tried:

I have tried using get tried putting it in a function rather out alone but it gives does not resolve the error
Posted
Updated 27-Oct-22 21:47pm
Comments
Richard MacCutchan 27-Oct-22 4:25am    
Where exactly in all that code does the error occur?
Dev Contractor 2022 27-Oct-22 4:48am    
the problem was i was importing ref from firebase storage and i was using firebase realtime database so when i used ref i passed in the database instead of storage that is why the error was occuring and thank you very very much for looking at my question
Chris Copeland 27-Oct-22 4:27am    
Usually this means a variable that you're referencing has a value of undefined when you try to read the property (as the error suggests), however in the code you've provided there are no path references.

You need to use the developer tools console to look at the error, it should tell you exactly which file and line is causing the issue.
Dev Contractor 2022 27-Oct-22 4:48am    
the problem was i was importing ref from firebase storage and i was using firebase realtime database so when i used ref i passed in the database instead of storage that is why the error was occuring and thank you very very much for looking at my question

1 solution

i fixed it...
the problem was i was importing ref from firebase storage and i was using firebase realtime database so when i used ref i passed in the database instead of storage that is why the error was occuring and thank you very very much for looking at my question
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900