title: componentDidMount not rendering my data initially, only on componentDidUpdate
body: <p>I am new to React and I'm sure there is probably an easier way to do this but I am trying to load all events that belong to a specific group whose ID is passed to the Events components as a prop. The Events get changed every time a new group is selected using the componentDidUpdate and the getDerivedStateFromProps. That functionality works but the problem I am having is that on componentDidMount I am rendered an empty array of events so nothing shows up on the first click of a group but they show up on the second (and on). </p>
  
  <p>Here is the Events component:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { Card, CardActionArea, CardMedia, CardContent, Typography, 
  CardActions, Button, Grid } from '@material-ui/core';
  import firebase from '../config/Fire'; 
  
  export class Events extends Component {
  constructor(props){
      super(props);
      this.state = {
          currentGroup: '',
          eventHold: [],
          loaded: false
      }
      this.formatDate = this.formatDate.bind(this);
      this.loadEvents = this.loadEvents.bind(this);
  }
  componentDidMount(){
      this.setState({currentGroup: this.props.currentGroup}, () =&gt; {this.loadEvents(this.state.currentGroup)})
  }
  
  componentDidUpdate(prevProps, prevState){
      if(prevState.currentGroup !== this.state.currentGroup){
          const newGroup = this.state.currentGroup;
          this.setState({currentGroup: newGroup}, () =&gt; {
              this.loadEvents(newGroup);
          });
      }
  }
  static getDerivedStateFromProps(nextProps, prevState){
      if(nextProps.currentGroup!==prevState.currentGroup){
          return {currentGroup : nextProps.currentGroup};
      }
      else
          return null;
  }
  loadEvents(groupid){
      const groupRef = firebase.database().ref('groups').child(groupid).child('events');
      var tempIdHold =[];
      groupRef.on('value', snapshot =&gt; {
          snapshot.forEach(snap =&gt; {
              tempIdHold.push(snap.key)
          })
      })
      const rootRef = firebase.database().ref('events');
      const tempEventHold =[];
      tempIdHold.forEach(event =&gt; { 
          rootRef.child(event).on('value', snap =&gt; {
              let newEvent = {
                  id: snap.key,
                  title: snap.val().title,
                  description: snap.val().description,
                  date: snap.val().date
              };
              tempEventHold.push(newEvent);
          })
      }); 
      this.setState({
          eventHold: tempEventHold,
          loaded:true
      })
  }
  formatDate = ( date ) =&gt; {
      const year = date.substring(0,4);
      const month = date.substring(5,7);
      const day = date.substring(8,10);
      const dateObj = new Date(year, month-1, day);
  
      return dateObj.toLocaleDateString();
  }
  render(){
      console.log(this.state.loaded);
      if(this.state.loaded){
          return(
              &lt;div&gt;
                  &lt;Grid container 
                      spacing={24} 
                      justify="center"
                      alignItems="center"&gt;
                  {this.state.eventHold.map(event =&gt; 
                      &lt;Grid item key={event.id}&gt;
                          &lt;Card&gt;
                              &lt;CardActionArea&gt;
                              &lt;CardMedia
                                  component="img"
                                  alt=""
                                  height="140"
                                  image= "blank"
                                  title=""
                              /&gt;
                              &lt;CardContent&gt;
                                  &lt;Typography gutterBottom variant="h5" component="h2"&gt;
                                  {event.title}
                                  &lt;/Typography&gt;
                                  &lt;Typography component="p"&gt;
                                  {this.formatDate(event.date)}
                                  &lt;/Typography&gt;
                                  &lt;Typography component="p"&gt;
                                  {event.id}
                                  &lt;/Typography&gt;
                                  &lt;Typography component="p"&gt;
                                  {this.state.currentGroup}
                                  &lt;/Typography&gt;
                              &lt;/CardContent&gt;
                              &lt;/CardActionArea&gt;
                              &lt;CardActions&gt;
                              &lt;Button size="small" color="primary"&gt;
                                  Like
                              &lt;/Button&gt;
                              &lt;Button size="small" color="primary"&gt;
                                  Comment
                              &lt;/Button&gt;
                              &lt;Button size="small" color="primary"&gt;
                                  Learn More
                              &lt;/Button&gt;
                              &lt;/CardActions&gt;
                          &lt;/Card&gt;
                      &lt;/Grid&gt;
                  )}
                  &lt;/Grid&gt;
              &lt;/div&gt;
          )
      }
      return (
          &lt;div&gt;
              &lt;img src="https://upload.wikimedia.org/wikipedia/commons/b/b1/Loading_icon.gif" /&gt;
          &lt;/div&gt;
        )
  }
  </code></pre>
  
  <p>}        </p>
  
  <p>Quick explanation of the loadEvents(): I am retrieving all eventIDs from the currentGroup (the group that should be rendered on screen) under the "groups" Firebase node and saving those to a temp array which I iterate through to retrieve the event data from the "events" Firebase node and push to a temp event array which is then pushed to the eventHold state array.</p>