How to display items from firestore database in react

1
votes

I am trying to render a list of products from my firestore database. I am able to get the items but not display them. How can you display data from firebase in react?

This is the error message my console log shows:

react-dom.development.js:13231 Uncaught Error: Objects are not valid as a React child (found: object with keys {Description, Name, Quantity}). If you meant to render a collection of children, use an array instead.

  import Firebase from "../FireBase";
    import { useEffect, useState } from "react";
    const TechP= () => {
      const [techList, setTechList] = useState([]);
    
      const getTech = async () => {
        try {
          const list = [];
          var snapshot = await Firebase.firestore().collection("Tech").get();
          snapshot.forEach((doc) => {
            list.push(doc.data());
          });
          setTechList([...list]);
          console.log(list);
        } catch (e) {
          alert('error');
        }
      };
    
      //Call when component is rendered
      useEffect(() => {
        getTech();
      }, []);
    
      return (
        <div>
            <p>working</p>
            <form>here{techList}</form>
          </div>
      )
    }
    export default TechP;
2
reactjsfirebasegoogle-cloud-firestore

2 Answers

1
votes

To render multiple JSX elements in React, you can loop through an array with the .map() method and return a single element.

Since techList is a array, you need to iterate through the list and render each one of them.

<form>here{techList && techList.length && techList.map(listItem => listItem)}

To read more on topic and consider using of key visit https://reactjs.org/docs/lists-and-keys.html

1
votes

You just have to .map() the techList

import Firebase from "../FireBase";
import { useEffect, useState } from "react";

const mockData = ['a', 'b', 'c']


const TechP = () => {
  const [techList, setTechList] = useState([]);

  const getTech = async () => {
    try {
      const list = [];
      var snapshot = await Firebase.firestore().collection("Tech").get();
      snapshot.forEach((doc) => {
        list.push(doc.data());
      });
      setTechList([...list]);
      console.log(list);
    } catch (e) {
      alert("error");
    }
  };

  //Call when component is rendered
  useEffect(() => {
    setTechList(mockData) // this changed just for demonstration reasons
  }, []);

  return (
    <div>
      <p>working</p>
      <form>here
      {techList.map((val, key) => {
        return (
          <div key={key}>
            {val}
          </div>
        )
      })}
      
      </form>
    </div>
  );
};

export default TechP;

Check map() method docs for more information