CODEWITHSUNDEEP
reactjsfirebasegoogle-cloud-firestore
clueless_asian
clueless_asian

Reputation: 15

Render data from Firebase Firestore in React

so I'm trying to render some data from a Firebase Firestore DB in my app, I followed a certain tutorial that got me up and running but now that I'm trying to figure out how to pull data from my own DB, that is something else.

Here is my code block that I think is what will listen to data from firestore based on a control number inputted by a user, for now the control number is hard coded before i will figure out how to get the value from a form.

//Code to Query data from Database
function SingleQuery() {
  const [drivers, setDrivers] = useState([]);

  useEffect(() => {
    const unsubscribe = firebase
      .firestore()
      .collection("drivers")
      .where("controlNumber", "==", "202003010850-014746") //get data according to control number
      .onSnapshot(snapshot => {
        const newDriver = snapshot.docs.map((doc) =>
          id: doc.id,
          ...doc.data()
        )
        });
        setDrivers(newDriver);
      });

    return () => unsubscribe();
  }, []);

  return drivers;
}

After that, its expected to render the data here:

<div id="results-list">
  {drivers.map((driver) =>
    <ol key={driver.id}>
     <li>{driver.controlNumber}</li>
    </ol>
)}
</div>

Right now I'm getting a mixed of parsing errors and unexpected tokens.

Hello everyone, this is an update. I now have everything up and running but I'm wondering if any of you can help me with querying data from Firestore according to the control number entered by a user.

<div className="violationQuery">
    <br />
    <br />
    <br />
    <h4>Enter Control Number</h4>
      <div className="searchBar" class="input-group-sm">
        <form>
          <input
           type="text"
           className="form-control"
           aria-label="Small"
           aria-describedby="inputGroup-sizing-sm"
           placeholder="Control Number"
           id="controlNum"
          />
           <br />
         <input className="btn btn-primary" type="submit" value="Submit" />
        </form>
</div>

I need to get the value of inputted and place it in the where() method in the SingleQuery Hook above.

Upvotes: 0

Views: 517

Answers (1)

Abhishek
Abhishek

Reputation: 1332

Check your map method, Syntax is not correct. I think you are trying to create an Object and return it. 


//Code to Query data from Database
function SingleQuery() {
  const [drivers, setDrivers] = useState([]);

  useEffect(() => {
    const unsubscribe = firebase
      .firestore()
      .collection("drivers")
      .where("controlNumber", "==", "202003010850-014746") //get data according to control number
      .onSnapshot(snapshot => {
        const newDriver = snapshot.docs.map((doc) => {  
          return {   // returns a new Object
            id: doc.id,
            ...doc.data()
          };
        });
        setDrivers(newDriver);
      });

    return () => unsubscribe();
  }, []);

  return drivers;
}

Upvotes: 3

Related Questions