title: ReactJS Components Not loading unless you reload the site for the 2nd time
body: <pre><code>    var img;
  
      var dateFormat = require('dateformat');
      var count;
      let arrayIMG = []
      var storage = firebase.storage();
      var storeRef = storage.ref('images/')
      const config =  {
  
         ...
      };
  
      if (!firebase.apps.length) {
          firebase.initializeApp(config);
      }
  
  
      const subContStyle = {
          width: '450px',
          height: '60px',
          marginLeft: '90px'
  
      };
  
      const photoStyle = {
          width: '400px',
          height: '200px'
      };
  
      const MainFeedStyle = {
          marginLeft: '40px',
          width: '1050px',
          height: '500px',
          overflowY: 'auto'
  
      }
  
      const footer = {
          marginTop: '80px'
      };
  
      const h2Style = {
          marginTop: '60px',
          marginLeft: '100px',
          fontstyle: 'Century Gothic'
      };
  
      const button_style = {
          marginLeft: "6px"
      };
  
      const uploadBtn = {
          marginRight: "5px"
      };
      const styles = {
          card: {
              maxWidth: 345,
          },
          media: {
              height: 140,
          },
      };
  
  
      const headStyle = {
          height: '530px',
          overflowY: 'auto',
          width: '1140px',
          marginTop: '-130px',
  
  
      };
  
      const perDivStyle = {
          width: '60%',
          height: '20%',
          marginLeft: '200px'
      }
  
  
  
  
      class Feed extends Component {
  
          constructor(props) {
              super(props);
  
              // this.state = {}
  
              this.state = {
                  arrayIMGS: arrayIMG,
                  news: [],
                  title: [],
                  dateCreated: []
  
              };
          }
  
          componentDidMount() {
              var that = this
  
              firebase.database().ref('/IMAHE').on("child_added", function (arrayIMG) {
                  let newData = [...that.state.arrayIMGS]
  
                  var yeah = dateFormat(arrayIMG.val().createdAt,"dddd, mmmm dS, yyyy, h:MM:ss TT")
                  newData.push(arrayIMG.val().url)
                  that.setState({ arrayIMGS: newData})
              })
          }
  
          render() {
              return(
  
                  &lt;div&gt;
                      &lt;div style={headStyle}&gt;
                          &lt;div style={perDivStyle}&gt;
  
  
  
  
               {this.state.arrayIMGS.map((e) =&gt;
  
                           { return (
                              &lt;ListGroup&gt;
                                  &lt;ListGroupItem &gt;
                                      &lt;Card&gt;
                                          {/*{alert("URL: "+e)}*/}
                                          {/*{alert("Indexes: "+index)}*/}
                                          &lt;CardImg top width="50%" src={e} alt="Card image cap" /&gt;
                                          &lt;CardBody&gt;
                                              &lt;CardTitle&gt;{e.title}&lt;/CardTitle&gt;
                                              &lt;CardText&gt;This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.&lt;/CardText&gt;
                                              &lt;CardText&gt;
                                                  &lt;small className="text-muted"&gt;{this.state.dateCreated}&lt;/small&gt;
                                              &lt;/CardText&gt;
                                          &lt;/CardBody&gt;
                                      &lt;/Card&gt;
                                  &lt;/ListGroupItem&gt;
                              &lt;/ListGroup&gt;
                          )}
                          )}
  
                      &lt;/div&gt;
  
                      &lt;div style={footer}&gt;
  
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
      export default Feed;
  </code></pre>
  
  <p>components (chartJS and mapping images from firebase) not working well in first load unless you reload the page. The function of this module is to show user all the images that are being uploaded by other users, so it is expected to load all the images once the page is loaded, but in my case it's not working that way, I have to reload the page to make it work</p>