Archive.js

import React, { Component } from "react";
import SearchBar from "./SearchBar";
import AddImageForm from "./AddImageForm";
import Images from "./Images";
import firebase from "../firebase";

const itemsRef = firebase.database().ref("images");

class Archive extends Component {
 constructor(props) {
   super(props);

   this.state = { images: [] };
 }


 /**
  * This is where you can update your state each time the component is "mounted" / initially loaded.
  */
 componentWillMount() {
     itemsRef.on("value", snapshot => {
         const lessAwkardThisWay = snapshot.val();
         this.setState({
             images: [ ...lessAwkardThisWay ]
         })
     })   
 }
 

 render() {
   return (
     <div>
       <h1>This is the Archive</h1>
       <SearchBar />
       <AddImageForm />
       <Images images={this.state.images} />
     </div>
   );
 }
}

export default Archive;