I'm trying to retrieve a Slice or some Data from an Array nested under a Product under the field videoURL.
I think either I'm using React Hooks wrong, or useEffect wrong.
const [reviews, setReviews] = useState();
useEffect((productID) => {
firestore
.collection("products")
.doc(productID)
.collection("productReviewClips")
.get()
.then((snapshot) => {
setReviews([
...snapshot.docs.map((doc) => {
return {
...doc.data(),
documentID: doc.id,
};
}),
]);
})
console.log(reviews)
}, [productID]);
> {reviews.slice(0, 3).map((videoUrl, pos) => {
const [] = videoUrl;
const configProduct = {
...product,
};
return (
<ReactPlayer playing={true}
url={videoUrl}
width="24%"
height="100%"
controls
muted
loop
key={pos} {...configProduct} />
);
})}
/>
After playing with it, the Reactiflux discord, and the Firebase Developers Discord, I was able to get my list of Review Videos from Each productID's videoURLs and display them on each product page according to each product's ID.
This can be a similar model for others attempting to display user generated video blob reviews of a product by placing the video blobs in their own collection under a product.
useEffect(() => {
firestore
.collection("products")
.doc(productID)
.collection("productReviewClips")
.get()
.then((snapshot) => {
setReviews([
...snapshot.docs.map((doc) => {
return {
...doc.data(),
documentID: doc.id,
};
}),
]);
})
}, []);
return (
<div>
{reviews.map((documentID, pos) => {
const {videoUrl} = documentID
const configProduct = {
...documentID,
};
return (
<ReactPlayer playing={true}
url={videoUrl}
width="24%"
height="100%"
controls
muted
loop
key={pos} {...configProduct} />
);
})}
</div>
)