Firebase 3.5.2 with create-react-app doesn't works

Question

I followed step by step this official Firebase Youtube guide. I want to use Firebase into a React app created by create-react-app, like the example in the official Firebase channel. I generated the following code with the addiction of a small form:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import * as firebase from 'firebase'

const config = {
    apiKey: "SUPERSECRET",
    authDomain: "SUPERSECRET.firebaseapp.com",
    databaseURL: "https://SUPERSECRET.firebaseio.com",
    storageBucket: "",
    messagingSenderId: "SUPERSECRET"
};

firebase.initializeApp(config);

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

app.js

import React, { Component } from 'react';
import * as firebase from 'firebase';

export default class PageOne extends Component{

    constructor(){
        super();
        this.state = {
            name: "example"
        }
    }

    submitValue(e){
        e.preventDefault();
        console.log("pressed");
        const ref = firebase.database().ref().child("names");
        ref.set({
            name: e.target.value
        })

    }

    componentDidMount(){
        const ref = firebase.database().ref().child("names");
        ref.on('value', snapshot => {
            this.setState({
                name: snapshot.val()
            });
        })
    }

    render(){
        return(
            <div>
                <h1>{this.state.name}</h1>
                <form onSubmit={this.submitValue.bind(this)} className="form">
                    <input type="text" id="nameField"/>
                    <input type="submit" />
                </form>
            </div>
        )
    }
}

No console log error appears, no response from Firebase. What's wrong? Thanks!!

update 1:

I missed to add the key to the snapshot.value:

componentDidMount(){
        const ref = firebase.database().ref().child("names");
        ref.on('value', snapshot => {
            this.setState({
                name: snapshot.val().name
            });
        })
    }

Now I can read from DB, but I can't write values when I submit form.

Answer 1

Ok, errors are that I forgot to handle change in input value and I missed to write .name in snapshot.val() This is the correct code in App.js:

import React, { Component } from 'react';
import * as firebase from 'firebase';

export default class PageOne extends Component{

    constructor(props){
        super(props);
        this.submitValue = this.submitValue.bind(this);
        this.handleChange = this.handleChange.bind(this);
        this.state = {
            name: "Pippo",
            value: ""
        }
    }

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

    submitValue(e){
        e.preventDefault();
        const ref = firebase.database().ref().child("names");
        ref.set({
            name: this.state.value
        })
    }

    componentDidMount(){
        const ref = firebase.database().ref().child("names");
        ref.on('value', snapshot => {
            this.setState({
                name: snapshot.val().name
            });
        })
    }

    render(){
        return(
            <div>
                <h1>{this.state.name}</h1>
                <form onSubmit={this.submitValue} className="form">
                    <input type="text" value={this.state.value} onChange={this.handleChange}/>
                    <input type="submit" />
                </form>
            </div>
        )
    }
}

Now value correctly send to Firebase value and update in real time my component.