Question 120447 in Firebase Question posted in
An extensive official documentation can be found here.

Firebase – Firestore orderBy function in react

I have a page which shows some collections from my firestore database, I am struggling to work out how to use the orderBy function to show the documents in a specific order.

I’m not sure where to put orderBy in the code. I would like to order them by a field from the firestore documents called ‘section’.

I’ve been trying this week following other tutorials and answers from StackOverflow but can’t yet work it out.

import React, { useEffect, useState, Component, setState }  from 'react';
import { collection, getDocs, getDoc, doc, orderBy, query } from 'firebase/firestore';
import "./AllSections.css";
import { Firestoredb } from "../../../../../firebase.js";
import AllCourses from './AllCourses';
import ReactPlayer from 'react-player'

import ViewSection from './ViewSection';
import SectionsTabData from './SectionsTabData';
import {
  BrowserRouter as Router,
  Link,
  Route,
  Routes,
  useParams,
} from "react-router-dom";
import VideoJS from './VideoJS';



function SectionsData() {


  const videoJsOptions = {
    controls: true,
    sources: [{
      src: sectionVideo,
      type: 'video/mp4'
    }]
  }

  const {courseId} = useParams();

  const {collectionId} = useParams();

  const params = useParams();

  const [sectionId, setSectionId] = useState('');

  const [sectionImage, setSectionImage] = useState('');

  const [sectionVideo, setSectionVideo] = useState('');
  
  const [sectionContent, setSectionContent] = useState('');


    const [isShown, setIsShown] = useState(false);
    const handleClick = event => {
        // 👇️ toggle shown state
        setIsShown(current => !current);
    }
    

    const [active, setActive] = useState();


    const [id, setID] = useState("");


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

    useEffect(() => {
      getSections()
    }, [])
  
    useEffect(() =>{
      console.log(Sections)
    }, [Sections]) 
  
    function getSections() {
        const sectionsCollectionRef = collection(Firestoredb, collectionId, courseId, 'Sections'); 
        orderBy('section')
        getDocs(sectionsCollectionRef)
        .then(response => {
          const content = response.docs.map(doc => ({
            data: doc.data(), 
            id: doc.id,
          }))
          setCourses(content)
        })
        .catch(error => console.log(error.messaage))
        

        
      }

        const handleCheck = (id, image, video, content) => {
        console.log(`key: ${id}`)
        /*alert(image)*/
        setSectionId(id)
        setSectionImage(image)
        setSectionVideo(video)
        setSectionContent(content)
      }
      
  
    return (
        
      <>
      <div className='MainSections'> 

        <div className='Sidebar2'>
              
              <ul className='SectionContainer'
               >
                {Sections.map(section => <li className='OneSection' key={section.id} 
                
                style={{
                    width: isShown ? '100%' : '200px',
                    height: isShown ? '100%' : '50px',
                }}
                onClick={() => 
                  handleCheck(section.id, section.data.thumbnailImageURLString, section.data.videoURLString, section.data.contentURLString)}

                id = {section.id}
                >
               
                <br />
                {section.data.name}
                  <br />
                  <br />
                  {isShown && (
                  <img className='SectionImage' src={section.data.thumbnailImageURLString !== "" ? (section.data.thumbnailImageURLString) : null} alt='section image'></img>
                  )}
                  <br />
                  </li>)}
              </ul>
              </div>
              <div className='ViewSection'>
                
                <iframe className='Content' src={sectionContent} 
                 width="100%"/>
              </div>
          </div>
          
          </>
    
    )

    
}

export default SectionsData
Tags:

2

Answers


  1. 0

    You are using orderBy incorrectly please view the docs here: https://firebase.google.com/docs/firestore/query-data/order-limit-data

    Your query should look something along these lines if you’re trying to order your data in a specific way. Assuming your sectionsCollectionRef is correct:

      const sectionsCollectionRef = collection(Firestoredb, collectionId, courseId, 'Sections')
  const q = query(sectionsCollectionRef, orderBy('section', 'desc'))
  const querySnapshot = await getDocs(q);
    Login or Signup to reply.
  2. 0

    The orderBy() won’t do anything on it’s own. You must use it along query() function to add the required QueryConstraint and build a Query as shown below:

    import { collection, query } from "firebase/firestore"

const sectionsCollectionRef = collection(Firestoredb, collectionId, courseId, 'Sections'); 

const sectionsQueryRef = query(sectionsCollectionRef, orderBy("section"))
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search