How display data from firestore in a react web app

Question

first of all I'm new on this form so feel free to tell me if I've forget crucial information. I would like to know how can I get data from my firestore DB displayed on my React web app, actually, i can't display the data on the console of the site but I really can't find a way to diaplay them my site.

function App() {
  const TITLE = '~Siting on Clouds~'
  console.log("Start");

    const list_div = document.createElement("P");
    db.collection('Capteur').onSnapshot(function (querySnapshot) {
      querySnapshot.forEach( doc => {
        console.log("Nom : ", doc.data().Nom);
        console.log("Valeur : ", doc.data().Valeur);
        list_div.innerHTML = '<div className="App"><p>Name :' + doc.data().Nom + '<br>Valeur : '+ doc.data().Valeur + '</brW></p></div>'
      })
    })

  return (
    <div className="App">
      <header className="App-header">{TITLE}
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Information that I want
        </p>
      </header>
    </div>
  );
}

There is my site with the information that I display in the console my web page WIP

For information I'm using React on IntelliJ

Answer 1

This is what i will do it:

import { useState, useEffect } from "react"; // import useEffect and useState hooks from react

function App() {
  const [dataToShow, setData] = useState([]);
  // Fetch the data from firebase when the commponent is mounted
  useEffect(() => {
    const unsubscribe = db
      .collection("Capteur")
      .onSnapshot(function (querySnapshot) {
        setData(
          querySnapshot.docs.map((doc) => ({ id: doc?.id, data: doc?.data }))
        );
      });
    // Cleanup function
    return () => unsubscribe();
  }, []);

  return (
    <div>
      {dataToShow.map((show, index) => {
        return (
          <div className="App" key={index}>
            <p>Name : {show?.data?.Nom} </p>
            <p>Valeur : + {show?.data?.Valeur}</p>
          </div>
        );
      })}
    </div>
  );
}

export default App;

Answer 2

Thanks to @Girgetto, I managed to post the information from the Db to the site, here is the "final" code if it can be useful

function App() {
  const TITLE = '~Siting on Clouds~'

  const [dataToShow, setData] = useState([]);

    db.collection('Capteur').onSnapshot(function (querySnapshot) {
      const data= [];
      querySnapshot.forEach( doc => {
        console.log("Nom : ", doc.data().Nom);
        console.log("Valeur : ", doc.data().Valeur);
        data.push({name : doc.data().Nom, value: doc.data().Valeur})
      })
      setData(data);
    })

  return (
    <div className="App">
      <header className="App-header">{TITLE}
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          {dataToShow.map(data => ('Name : ' + data.name + ' Valeur : ' + data.value + ''))}
        </p>
      </header>
    </div>
  );
}

Answer 3

What I would do is to use a useState to render the information that I need like this:

import { useState } from 'react'; // first import useState

function App() {
  const TITLE = '~Siting on Clouds~'
  console.log("Start");

  const [dataToShow, setData] = useState([]); // initialize it

    db.collection('Capteur').onSnapshot(function (querySnapshot) {
      const data = [];
      querySnapshot.forEach( doc => {
       data.push({ name: doc.data().Nom, value: doc.data().Valeur })
      })
      setData(data);
    })

  return (
    <div className="App">
      <header className="App-header">{TITLE}
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          {dataToShow.map(capteur => (<p>Name :' + capteur.name + '<br>Valeur : '+ capteur.value + '</brW></p>))}
        </p>
      </header>
    </div>
  );
}