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

score 1 · Answer 1 · answered Mar 21 '21 at 19:53

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>
  );
}

Girgetto · Accepted Answer · 2021-03-21T19:05:22.987

0

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>
  );
}

edited Mar 21 '21 at 19:05

answered Mar 21 '21 at 17:45

Girgetto

1,010
9
19

Thanks for the anwser @Girgetto, I've try to do what you proposed but I have some questions : should I create an const (like const Capteur="";) outside of the db.collection request in order to use tes.push and setData(test); ? What should I add to the {/* Display data */} ? And finnaly after modifying my code and execute it seems that I have a TypeError like Capteur.push is not a function. Sorry for so many questions but I would like to be sure that I miss nothing. – CobraLicorne160 Mar 21 '21 at 18:16
yes, you are right, as it is suggested here https://stackoverflow.com/a/59959589/9095807 you need to store you date in a const variable to avoid the TypeError, no the display data comment is not needed – Girgetto Mar 21 '21 at 18:19
Okay I see, so I've changed that and the ".foreach" into ".map" and I Have a error that telle me "querySnapshot.map is not a function" so I've try to come back with the ".foreach" but this time it was the "dataToShow.map" that showed me "Cannot read property 'map' of undefined". – CobraLicorne160 Mar 21 '21 at 18:51
Maybe is because when `setData` is executed the value added to the state is `undefined`, I've edited the code with the `forEach` and a const array variable where will recive the data to display has object doing this also the render function should be modified – Girgetto Mar 21 '21 at 19:07

score 0 · Answer 3 · answered Mar 21 '21 at 22:46

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;

How display data from firestore in a react web app

3 Answers3