element with the `id` of `root` and it inserts the React component called `
`. The code for `
` is found in `App.js`, and it is here that we find our API calls to Firebase.
### App.js
```javascript
import React, { useEffect, useState } from "react";
const App = () => {
const [users, setUsers] = useState([]);
useEffect(() => {
firebase.database().ref("users").on("value", snapshot => {
let users = [];
snapshot.forEach(snap => {
users.push(snap.val());
});
setUsers(users);
});
}, []);
```
Here's what's going on.
```javascript
const [users, setUsers] = useState([]);
```
The `useState` React [hook](https://reactjs.org/docs/hooks-state.html?ref=blog.afi.io) lets you add state to functions. It returns a pair of values, for which I have used [destructuring assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring%5Fassignment?ref=blog.afi.io) to create two local variables. For example, `users` lets the component access the current list of drivers (the list of `user_id`s in the `users` object in Firebase), which conveniently also stores a references to the `location` object with the driver's most recent `lat`/`lng`. The `setUsers` variable is a function that is used to update the list of drivers.
After that,
```javascript
useEffect(() => {
firebase.database().ref("users").on("value", snapshot => {
let users = [];
snapshot.forEach(snap => {
users.push(snap.val());
});
setUsers(users);
});
}, []);
```
we use React's built-in `useEffect` Hook to tells React to perform some action or “side effect” after a component has been rendered in the browser. The `useEffect` Hook accepts two parameters. The first is a function that accepts no parameters and defines what the side effect actually does. The second is an array of dependencies i.e. variables that will be used in the first parameter (we have none, so we pass in an empty array).
Let's look carefully at our "side effect" code.
```javascript
firebase.database()
```
To read or write data from the Realtime Database, you need an instance of `firebase.database.Reference`.
```javascript
firebase.database().ref("users")
```
A reference (the `ref()` method) refers to the location inside our database. Here, we are pointing to the `users` object, which is a list of key value pairs of `user_id`s and their `location`s.
```javascript
firebase.database().ref("users").on("value", snapshot => { // some stuff in here })
```
The `on()` method reads data at a path and listens for changes to `users` and any child objects of `users`. This is awesome because if any of your drivers move, their `location` object will update and we can render their new locations in realtime on our map. Any time you read data from the database, you receive the data as a `DataSnapshot`, which in our example above is stored in the `snapshot` function.
```javascript
firebase.database().ref("users").on("value", snapshot => {
let users = [];
snapshot.forEach(snap => {
users.push(snap.val());
});
setUsers(users);
});
```
Next, I create an empty local array called `users` and iterate over my `snapshot`, pushing the value of each item (retrieved by calling `snap.val()`) into the `users` array. Each item is a key - value pair like the one shown below.
Lastly, I call `setUsers(users)` to update the `users` hook. Now we are ready to display our drivers on the map by passing the `locations` object as a prop to our `
` component. The code for `LiveMap` lives in `src/livemap.js`.
```javascript
return (
);
```
### livemap.js
This is just a simple Google Maps React component (very similar to the Google [Map React project](https://www.npmjs.com/package/google-map-react?ref=blog.afi.io)) that iterates over `locations`, extract each `{location.lat}, {location.lng}` and plots them on a map.
```javascript
return (
this.map = elem} >
{this.props.locations.map((location, index) => (
this.setState({ selectedLocation: location })}
>
{this.state.selectedLocation === location &&
this.setState({ selectedLocation: null })}>
{location.lat}, {location.lng}
}
))}
);
```
The magic about all this is that there is no need to poll the server to get updated locations. When data changes in Firebase, our `ref` in `App.js` listens for changes and everything updates automagically.
So there you have it! You now have live delivery driver tracking app for your fleet. This is a must have for more advanced features like dispatch, customer notifications and delivery live tracking by your customers.
đź‘‹ **As** **always, if you have any questions or suggestions for me, please** [**reach out**](https://afi.io/?ref=the-afi-labs-blog#contact-us) **or** [**say hello on LinkedIn**](https://www.linkedin.com/in/afian-anwar-a023b143/?ref=the-afi-labs-blog)**.**
Part 1: [Implementing driver live tracking on iOS](https://blog.afi.io/blog/implementing-driver-live-tracking-on-ios/)
Part 2: [Building a live driver tracking backend](https://blog.afi.io/blog/building-live-driver-tracking-backend/)
**Part 3: Driver tracking with Google Maps (this article)**