title: How to pass each firebase database entries into react - native components in a loop
body: <p>My Firebase project looks like - 
  <a href="https://i.stack.imgur.com/QNQWh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QNQWh.png" alt="enter image description here"></a></p>
  
  <p>Suppose I have multiple database entries in the announcements, then which is the best way to pass each announcement entry to a react - native component which takes <code>Popup</code> and <code>Longtext</code> as <code>props</code>. </p>
  
  <p>I tried something like this: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>returnNotificationCards() {
    var newArr = this.state.notContainer;
    return newArr.map((line) =&gt; {
      return &lt;NotificationCards Popup = {
        line.Popup
      }
      longText = {
        line.Longtext
      }
      /&gt;
    });
  
  }
  
  componentDidMount() {
    let dataContainer
    firebase.database().ref('/announcements/').on('value', (snapshot) =&gt; {
      snapshot.forEach((childSnapshot) =&gt; {
        var childData = childSnapshot.val();
        dataContainer.push(childData)
      });
    });
    this.setState({
      notContainer: dataContainer
    })
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>But the code is not working. Here the component to which the Firebase data should be passed is <code>NotificationCards</code>.</p>