How to Setup Our Own Sendgrid, Mailgun or Postmark like SMTP Server

Show FireBase Firestore document sub-collection information when it is clicked from a list in react

Prashant

I have a page in my react app which shows all of the documents in a certain Firestore collection.

I am trying to make an onClick function which, when one of the documents in the list is clicked, brings up the sub-collections of that specific document either on a new page or as an overlay which covers the screen.

I currently haven't been able to do this. Could anyone help?

Here is the current code which shows the list of documents. At the moment the onClick function opens a new page:

import React, { useEffect, useState } from 'react';
import { collection, getDocs, getDoc, doc } from 'firebase/firestore';
import { Firestoredb } from "../../../../../firebase.js";
import "./AllCourses.css";
import Sections from './Sections.js';


export default function AllCourses() {


  

  
  const [Courses, setCourses, error, setError] = useState([]);

  useEffect(() => {
    getCourses()
  }, [])

  useEffect(() =>{
    console.log(Courses)
  }, [Courses]) 

  function getCourses() {
    const courseCollectionRef = collection(Firestoredb, 'Example Course')
    getDocs(courseCollectionRef)
    .then(response => {
      const content = response.docs.map(doc => ({
        data: doc.data(), 
        id: doc.id,
      }))
      setCourses(content)
    })
    .catch(error => console.log(error.messaage))
  }



  return (
    <>
    <div className='MainContent3'> 
            <h1>All Courses</h1>
            
            <div className='SectionTitle'>Test Courses</div>
            <ul className='CourseContainer2'
            onClick={()=> {
              window.location.pathname = '/section';
              }}>
              {Courses.map(course => <li className='OneCourse2' key={course.id}>
                <img className='CourseImage2' src={course.data.thumbnailImageURLString} alt='course image'></img>
                <br />
                {course.data.name}
                <br />
                {course.id}
                </li>)}
            </ul>
        </div>
        </>
  )

}

The new page, which opens when a document from that list is clicked, then has the following code on.

I can't work out how to reference the clicked documents firestore ID on this new page:

import React, { useEffect, useState }  from 'react';
import { collection, getDocs, getDoc, doc } from 'firebase/firestore';
import "./AllCourses.css";
import { Firestoredb } from "../../../../../firebase.js";
import AllCourses from './AllCourses';

function Sections(props) {

    const [Sections, setCourses, error, setError] = useState([]);

    useEffect(() => {
      getSections()
    }, [])
  
    useEffect(() =>{
      console.log(Sections)
    }, [Sections]) 
  
    function getSections() {
        const sectionsCollectionRef = collection(Firestoredb, 'Example Course', AllCourses.data.course.id, 'Sections')
        getDocs(sectionsCollectionRef)
        .then(response => {
          const content = response.docs.map(doc => ({
            data: doc.data(), 
            id: doc.id,
          }))
          setCourses(content)
        })
        .catch(error => console.log(error.messaage))
      }
  
  
  
    return (
      <>
      <div className='MainContent3'> 
              <h1>All Courses</h1>
              
              <div className='SectionTitle'>Test Courses</div>
              <ul className='CourseContainer2'>
                {Sections.map(section => <li className='OneCourse2' key={section.id}>
                  <img className='CourseImage2' src={section.data.thumbnailImageURLString} alt='course image'></img>
                  <br />
                  {section.data.name}
                  <br />
                  {section.id}
                  </li>)}
              </ul>
          </div>
          </>
    )

}

export default Sections