Get specific post from CloudFirestore with React JS - reactjs

Question

So, I have a new problem. I have tried to solve this a couple of days without success.
I'm trying to learn react and has creating a reactjs-site where I showcasing videos.
First I had problem to get the ID from the query string, but sort of solved it.
The code in my video.js looks like this:
function getDataFromDB(props) {
const [times, setTimes] = useState([])
const db = firebase.firestore();
useEffect(() => {
fire.firestore().collection('videoEvent').onSnapshot((snapshot) => { //time is the db name
const newTimes = snapshot.docs.map((doc) => ({
id: doc.id,
...doc.data()
}))
setTimes(newTimes)
})
}, [])
return times
}
const Video = (props) => {
const videoEvent = getDataFromDB()
const vidId = props.match.params.id;
console.log(vidId)
const { project } = props;
return (
<div className='div1080'>
<div className='flex-container'>
{videoEvent.map((videoEvent) =>
<div key={videoEvent.id} className='item' ><img className='imagevideo' src={photo} alt='hej' />
<br /> {videoEvent.Author} {videoEvent.Price}
{props.match.params.id}
<Link to={'video/' + videoEvent.id}>{videoEvent.eventTitle}</Link>
</div>
)}
</div>
</div>
)
}
export default Video
So now it is looping all the posts, that works fine, but I just want to show a specific post, with the ID from 'props.match.params.id'.
Any suggestions?

Answer 1

To access a single document for which you know the ID, see the documentation on getting a single document and getting realtime updates. Based on that:
fire.firestore().collection('videoEvent').doc(props.match.params.id).onSnapshot((doc) => {
const newTimes = [{
id: doc.id,
...doc.data()
])
setTimes(newTimes)
})
You'll need to pass the ID to getDataFromDB, which you seem to have forgotten:
const videoEvent = getDataFromDB(props)