App.jsx

import React, { Component } from 'react';
import './App.css';
import fire from './fire';

class App extends Component {
  constructor() {
    super()
    this.state = {
      messages: [],
      message: ""
    }
    this.handleChange = this.handleChange.bind(this)
    this.handleSubmitClick = this.handleSubmitClick.bind(this)
  }

  componentDidMount(){
    // Loads Messages
    let ref = fire.database().ref("/messages")
    ref.on('value', (snap) => {
      if (snap.val()) {
        let msgArr = []
        for (let key in snap.val()) {
          msgArr.push({
            id: key,
            message: snap.val()[key].message,
          });
        }
        this.setState({ messages: msgArr });
      }
    })
  }

  handleChange(event) {
    this.setState({ message: event.target.value });
  }

  handleSubmitClick(event){
    event.preventDefault();

    let ref = fire.database().ref("/messages");
    // Submits messages to the database.
    ref.push().set({message: this.state.message});

    this.setState({ message: "" })
  }

  render() {
    return (
      <div className="App">
          <ul>
            <li>Hey There!</li>
            {
              this.state.messages ? this.state.messages.map((message) =>
                <li key={message.id}>{message.message}</li>
              ) : <li>Your database has no messages. Add some!</li>
            }
          </ul>
        <div className="flex">
          <input type="text" value={this.state.message} onChange={this.handleChange}/>
          <button onClick={this.handleSubmitClick}>Submit</button>
        </div>
      </div>
    );
  }
}

export default App;