CODEWITHSUNDEEP
reactjsreact-router
Vaishali Aggarwal
Vaishali Aggarwal

Reputation: 45

UseParams is giving undefined and not fetching if from url

I am trying to fetch folder id from useParams but it is giving undefined. This is my App component

import { useParams} from 'react-router-dom';

function App() {
  const [isLogin , setIsLogin] = useState(true);
  // const ctx = useContext(UserContext)
  // const isLogin = ctx.isLogin;
  const user = useAuthState(auth);
  // const userId = user?.[0].uid;
  const userDetails = auth.currentUser;

  useEffect(() => {
    if (userDetails?.uid === null ) {
      setIsLogin(false);
    }
  } , [userDetails ])

  const { folderId } = useParams()
  console.log(folderId)

  return (
    <DndProvider backend={HTML5Backend}>
      <NavBar user = {user} onLogout={(props) => {setIsLogin(props)}} isLogin={isLogin} />
      <p>Id is {folderId}</p>
      <Routes>
      <Route path="/:folderId" exact element = {<ShowNotes userId = {userDetails?.uid} />} />
        <Route path='/register' exact element={user && isLogin ? 
          <div>
          <FolderButton userId = {userDetails?.uid} />
          <ShowFolder userId = {userDetails?.uid}  />
        </div> : <SignInForm onLogin = {(props) => {setIsLogin(props)}} />} />
        <Route path='/' exact element={user && isLogin ? <div>
          <AddNotesButton userId = {userDetails?.uid}  />
          <FolderButton userId = {userDetails?.uid} />
          <ShowFolder userId = {userDetails?.uid}  />
        </div> : <Login onLogin = {(props) => {setIsLogin(props)}}  />} /> 
      </Routes>
    </DndProvider>
  );
}
export default App;

this is folder component

mport React, { useState, useEffect } from "react";
import { db } from "../firebase";
import { collection, getDocs, docs } from "firebase/firestore";

import FolderData from "./FolderData";

function ShowFolder(props) {
  const [folders, setFolders] = useState([]);
  const folderRef = collection(db, "folders");

  useEffect(() => {
    const getData = async () => {
      const data = await getDocs(folderRef);
      const folderData = data.docs.map((doc) => {
        return { id: doc.id, data: doc.data() };
      });
      console.log(folderData);
      setFolders(folderData);
    };
    getData();
  }, []);

  return (
    <>
      {folders.map((folder) => {
        return (
          <div key={folder.id}>
            {folder.data.userId === props.userId && (
              <div>
                <div className="container w-full md:px-4 mx-auto py-2">
                  <div className="md:grid lg:grid-cols-3 md:grid-cols-2 mlg:grid-cols-3 md:gap-10 space-y-6 md:space-y-0 px-10 md:px-0 mx-auto">
                    <FolderData key={folder.id} folder={folder} />
                  </div>
                </div>
              </div>
            )}
          </div>
        );
      })}
    </>
  );
}

export default ShowFolder;

and this is folderData

import React from "react";
import { Link } from "react-router-dom";
import image from "../assets/folder.png";

function FolderData(props) {
  return (
    <div>
      <Link to={`/${props.folder.id}`}>
        <figure>
            <img alt="" src={image} height="150" width="90" />
          <figcaption>{props.folder.data.title}</figcaption>
        </figure>
      </Link>
    </div>
  );
}

export default FolderData;

Please help me out. I have even tried using match.params but that also is undefined. and if there is any other way i can get the content from url please suggest me that also.

Upvotes: 0

Views: 945

Answers (1)

Wraithy
Wraithy

Reputation: 2056

Your const { folderId } = useParams() needs to be in component which is wrapped by Route component that define these params

Upvotes: 1

Related Questions