Is there a way I can display my API data randomly when the page loads?

Question

I used firebase with React to create and call my API which contains more than 50 types of flowers with descriptions . Therefore, I want to display only 7 flowers randomly in the home page as the page loads. I also have a flower's page which displays all the flowers. Right now, this code just displays all the data as the page loads.

      const getPlants = async () => {
         const data = await getDocs(plantsCollectionRef);
         setPlants(data.docs.map(doc => ({ ...doc.data(), id: doc.id })));
      };
      getPlants();
   }, []);

And this is what I'm returning...

               return (
                  <div className="plant-card" key={plant.id}>
                     <img src={plant.image} alt={plant.name} loading="lazy" />
                     <div>
                        <h3>{plant.name}</h3>
                        <p>${plant.price}</p>
                     </div>
                     <div>
                        <p>Read more...</p>
                        <p>Buy</p>
                     </div>
                  </div>
               );
            })}

Pls, help me out.

Get the array of flowers and shuffle and show the first 7 items from the array - https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array — LoXatoR, Aug 25 '22 at 07:30
Alternatively, you can retrieve only the 7 documents at random from Firestore as shown here: https://stackoverflow.com/questions/46798981/firestore-how-to-get-random-documents-in-a-collection (if you only have 50 docs, I'd go with LoXatoR's approach though). — Frank van Puffelen, Aug 25 '22 at 07:47

Is there a way I can display my API data randomly when the page loads?

0 Answers0