How to insert value from state into a function? - reactjs

Question

I have an array that is generated from a firebase database query.
I want to save that in state so that as the data changes, it will re-render the screen.
I can't seem to get the value from state into my function. If I put the value from the array, it works, but then it won't automatically re-render when data changes.
Screen shot of it using the array... note the console log is printing that the state is set correctly.
and here it is with the error
It's gotta be right around line 101, but I cannot figure out the right syntax to make thsi work.
UPDATE: I was not initializing state, that was one part of the error.
import React, { Component } from 'react';
import Flexbox from 'flexbox-react';
import firebaseApp from '../api/firebase';
import GeoFire from 'geofire';
var geoRef = firebaseApp.database().ref('shiftgeo');
var geoFire = new GeoFire(geoRef);
var ref = geoFire.ref(); // ref === firebaseRef
var shiftKeys = []; // this array will hold the keys from the geoFire results
var shifts = []; // this array will hold the actual shift data of shifts in the geo, then we will filter it later
console.log(firebaseApp);
export class App extends React.Component {
constructor() {
super();
this.state = {
fname: 'Chris',
lname: 'Chong',
cellphone: '503 830 4313',
email: 'chris#ehotleads.com',
dataSource: ''
};
}
componentWillMount() {
let email = 'chris#ehotleads.com';
let password = '123456789';
firebaseApp.auth().signInWithEmailAndPassword(email, password)
.then((data) => {
//this.setState({ error: 'Account already exists. Logging you in...', loading: false });
console.log('success data', data);
this.setState({
user: data,
});
})
.catch((data) => {
//this.setState({ error: 'Authentication failed.', loading: false });
console.log('error data', data);
});
}
componentDidMount() {
var geoQuery = geoFire.query({
center: [45.616422, -122.580453],
radius: 1000,
});
geoQuery.on("key_entered", function(key, location, distance) {
// dont forget that as shifts are added that match the geo, this will automatically add to the shiftKeys array
//shiftKeys = [];
shiftKeys.push(key)
console.log("Found shift " + key + " at " + location + " (" + distance + " km away)");
});
geoQuery.on("ready", () => {
shifts = []; // we need to blow out the array every time this function runs or it will throw errors
shiftKeys.forEach((shiftKey) => {
//console.log(shiftKey);
let shiftsRef = firebaseApp.database().ref('shifts').child(shiftKey);
shiftsRef.on("value", (snapshot) => {
//console.log(snapshot.val())
//if (snapshot.val().state == "WA" && (snapshot.val().licenseRequired == "CNA" || snapshot.val().licenseRequired == "RN")) {
//if (snapshot.val().licenseType == this.state.licenseType || snapshot.val().licenseRequired == "TEST") {
shifts.push({
key: snapshot.key,
fname: snapshot.val().fname,
lname: snapshot.val().lname,
company: snapshot.val().company,
address1: snapshot.val().address1,
address2: snapshot.val().address2,
city: snapshot.val().city,
state: snapshot.val().state,
zip: snapshot.val().zip,
shiftDate: snapshot.val().shiftDate,
shiftStart: snapshot.val().shiftStart,
shiftLength: snapshot.val().shiftLength,
shiftDescription: snapshot.val().shiftDescription,
licenseType: snapshot.val().licenseType,
logo: snapshot.val().logo,
building: snapshot.val().building,
}) // end shifts.push
var date_sort_asc = function (date1, date2) {
if (date1.shiftDate > date2.shiftDate) return 1;
if (date1.shiftDate < date2.shiftDate) return -1;
return 0;
};
//}
//console.log(this.state.distancePref)
this.setState({
dataSource: shifts,
resultCount: shifts.length,
})
}); // end shiftsRef.on
}); // end shiftKeys map
}); // end geoQuery.on
console.log('ShiftArray: ', shifts)
console.log('StateArray: ', this.state.dataSource)
}
render() {
const listItems = this.state.dataSource.map((shift) =>
<li key={shift.key}>
{shift.address1}
</li>
);
console.log('ShiftArray: ', shifts)
console.log('StateArray: ', this.state.dataSource)
return (
<Flexbox flexDirection="column" minHeight="100vh">
<Flexbox element="header" height="60px">
Header link one
</Flexbox>
<Flexbox flexGrow={1}>
<Flexbox
width="20%"
minWidth="200px"
maxWidth="300px"
style={{ backgroundColor: '#ba0000' }}>
Sidebar Menu Goes Here
</Flexbox>
<Flexbox width="80%" flexDirection="row" style={{ backgroundColor: '#FFF' }}>
<div>List of Shifts Addresses</div>
<ul>{listItems}</ul>
</Flexbox>
</Flexbox>
<Flexbox element="footer" height="60px">
Footer
</Flexbox>
</Flexbox>
);
}
}
Now Im getting Uncaught TypeError: this.state.dataSource.map is not a function

Answer 1

The problem was that I failed to initialize dataSource in the state, and then after that, I initialized it with a string instead of an empty array.
Was missing: dataSource: [] in this.setstate in the constructor.