title: React Native Firebase - Push data to Array allowing to display in a FlatList
body: <p>I am new to React Native and struggling a little to get this working.  I have realtime database in Firebase which contains 'mechanic' names.  I would like to retrieve these names and display them in a list.</p>
  
  <p><a href="https://i.stack.imgur.com/9XvlJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9XvlJ.png" alt="enter image description here"></a></p>
  
  <p>I would like to display this data in a list and then execute some function when the user clicks on either name.  I thought adding the database data to an array then looping through the array to add it to my FlatList.</p>
  
  <p>The problem now is that when I execute the code, the <code>this.setState({ mechanicsList: mechanicsTemp });</code> returns an error.</p>
  
  <p><strong>Error</strong></p>
  
  <pre><code>[Unhandled promise rejection: TypeError: this.setState is not a function. 
  
  (In 'this.setState({]
  * src\screens\FindMechanics.js:28:30 in &lt;unknown&gt;
  - node_modules\promise\setimmediate\core.js:37:14 in tryCallOne
  - node_modules\promise\setimmediate\core.js:123:25 in &lt;unknown&gt;
  - ... 8 more stack frames from framework internals
  </code></pre>
  
  <p><strong>Full Code</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import { View, Text, SafeAreaView, TouchableOpacity, ScrollView, StyleSheet } from "react-native";
  import { Card } from 'react-native-elements'
  import firebase from "firebase/app";
  
  export default class FindMechanics extends Component {
      constructor(props) {
          super(props);
          this.state = {
              mechanicsList: [],
              isDataLoaded: false
          }
      }
  
      componentDidMount() {
          var query = firebase.database().ref("MechanicList").orderByKey();
          query.once("value")
              .then(function (snapshot) {
                  let mechanicsTemp = [];
                  snapshot.forEach(function (childSnapshot) {
                      // key will be the auth ID for each user
                      var key = childSnapshot.key;
                      var mechanicName = snapshot.child(key + '/name').val();
                      mechanicsTemp.push({ _name: mechanicName, _key: key });
                  });           
                  mechanicsList = mechanicsTemp;            
                  () =&gt; this.setState({ mechanicsList: mechanicsTemp }); // This does not execute it seems - main problem I believe
                  //this.setState({ mechanicsList: mechanicsTemp }); - This return a warning 'this.setState is not a function'
                  console.log(mechanicsList); //Prints data as expected
                  mechanicsTemp.forEach((mechanic) =&gt; {
                     console.log( mechanic._name); //Prints data as expected
                  });
              });
      }
  
      render() {
          //The Card element is empty - nothing shows. 
          console.log(this.state.mechanicsList) //This return Array [] which indicates it is empty
          return (
              &lt;SafeAreaView style={styles.container}&gt;
                  &lt;ScrollView horizontal={true}&gt;
                      &lt;TouchableOpacity&gt;
                          &lt;Card style={styles.card}&gt;
                              {
                                  this.state.mechanicsList.map((u, i) =&gt; {
                                      return (
                                          &lt;View key={i}&gt;
                                              &lt;Text&gt;{u._key}&lt;/Text&gt;
                                              &lt;Text&gt;{u._name}&lt;/Text&gt;
                                          &lt;/View&gt;
                                      );
                                  })
                              }
                          &lt;/Card&gt;
                      &lt;/TouchableOpacity&gt;
                  &lt;/ScrollView&gt;
              &lt;/SafeAreaView&gt;
          )
      }
  }
  
  const styles = StyleSheet.create({
      container: {
          flex: 1,
          alignItems: 'center',
          justifyContent: 'center',
          backgroundColor: '#FFF'
      },
      paragraph: {
          margin: 24,
          fontSize: 18,
          textAlign: 'center',
      },
      card: {
          flex: 1,
          width: '80%',
      },
  });
  </code></pre>
  
  <p><strong>Console</strong></p>
  
  <pre><code>Finished building JavaScript bundle in 384ms.
  Running application on Android SDK built for x86.
  Array []
  </code></pre>