0

Hey guys let me quickly explain my problem.

I currently have Component in which User can Search something. And after they Click on a Button I get the Data from Firebase which is then stored in a useState which I map afterwards. This whole operation is in one function.

But for now I show the result at the same Page because I dont know how to transfer the data in the useState to the other component.


const handleClick = async () => {

    
    
    const kurzRef = collectionGroup(db, 'kurzwaffensub' );
    const MOD = query(kurzRef,where("kurzModell", "==", `${kurzModell}` ));

if(kurzModell) {

const getWaffenDaten = async () => {
    const modell = await getDocs(MOD);
    const data = [];

for (const doc of modell.docs) {



  const parentDoc = await getDoc(doc.ref.parent.parent);
  const { Name, avatar,avatarPath, Erfahrung, Adresse, Schützenverein } = parentDoc.data();

  
  const  waffenbilderRef = collection(db, 'users', doc.data().uid, 'waffenbildersub')
  const subCollectionDocs = await getDocs(waffenbilderRef)
  const subCollectionData = subCollectionDocs.docs.map((doc) => {
                  return { id: doc.id, ...doc.data()}
  })
  

   data.push({
     ...doc.data(),
        Name,
        subCollectionData,
        avatar,
        avatarPath,
        Erfahrung,
        Adresse,
        Schützenverein
   });

}
      setTest(data)    
 }
    getWaffenDaten()

}

After that operation I just return the Result in the same Page . And I want to change the page after the onClick event with the Result. Because I dont want to see the User Interface of the Search Component.

Perhabs its pretty simple but Im still a beginner and would be very glad if you can help me out and teach me something new and important.

Freeman98
  • 67
  • 5
  • You can not use useState to share you status to another component. But, you have several options, 1. Pass your state as prop to the component you want 2. Use context API to your status among any component 3. Use Redux to pass status globally – Dilum Darshana Jan 16 '22 at 02:55
  • Try the state lifting: https://reactjs.org/docs/lifting-state-up.html – Bms bharadwaj Jan 16 '22 at 04:32

1 Answers1

0

You can do this in multiple ways:

  1. You can pass search query as URL parameter if you using router and fetch the data from result page
  2. You can use state management tool like Redux or built in context api.
Arjun Kariyadan
  • 489
  • 2
  • 12