How to share data from useState in React to another Component

Question

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.

Answer 1

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.