//	****		App.js		****

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

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      data: null,
      // **** 4 handle adding new data.  ↴
      newData: '' // use it as default (empty string)
    }
    
    // **** 8 need to bind `this` to the current version of the component  ↴
    // this is how it's done in the React docs as well
    this.handleChange = this.handleChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
  }
  
  componentDidMount () {
    database.ref('/') 
    .on('value', 
      (snapshot) => { 
        this.setState({
          data: snapshot.val()
        })
      }
    ) 
    
  }
  
  // **** 6 define handleChange.  ↴
  handleChange(event) {
    const newData = event.target.value // ☛  get the input field's data
    this.setState({
      newData: newData
    })
  }
  
  // **** 2 handle the form submition.  ↴
  handleSubmit(event) {
    event.prevenDefault() // first stop the broswer sending it
    // **** 3 update the state.  ↴
    // (did not do it just yet...)
  }
  
  
  render() {
    return (
      <div className="App">
        <div className="App--header">
          <h2>Welcome to React and Firebase</h2>
        </div>
        <pre className="App--data">
          { JSON.stringify(this.state.data, null, 2}
        </pre>
        // **** 1 add a form.  ↴
        <form className="App--form" onSubmit={this.handleSubmit}>
          // **** 5 handle when typing in the input field.  ↴
          // **** 7 update the fields value on data change.  ↴
          <input type="text" onChange={this.handleChange} value="this.state.newData" />
          <input type="submit" />
        </form>
      </div>
    );
  }
}

export default App;

Let's refactor all this above

  //	****		App.js		****

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

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      data: null,
      newData: ''
    }
    
    this.handleChange = this.handleChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
  }
  
  componentDidMount () {
    database.ref('/') 
    .on('value', 
      (snapshot) => { 
        this.setState({
          data: snapshot.val()
        })
      }
    ) 
    
  }
  
  handleChange(event) {
    const newData = event.target.value 
    // **** 1. destructure ES6  ↴
    this.setState(newData)
  }
  
  handleSubmit(event) {
    event.prevenDefault() 
    // **** 2.submit data to the database  ↴
    // we want to start at the root, and 
    // have the key generated for us ↴
    database.ref()
      .child('AMAZINGNEWDATA') // if key does not exist, it will be created
      .set(this.state.newData)
  }
  
  
  render() {
    return (
      <div className="App">
        <div className="App--header">
          <h2>Welcome to React and Firebase</h2>
        </div>
        <pre className="App--data">
          { JSON.stringify(this.state.data, null, 2}
        </pre>
        <form className="App--form" onSubmit={this.handleSubmit}>
          <input type="text" onChange={this.handleChange} value="this.state.newData" />
          <input type="submit" />
        </form>
      </div>
    );
  }
}

export default App;

With this so far, the new AMAZINGNEWDATA key is added and updated on Firebase and re-rendered in the client.