How to create messages list with new message form

Reactfire-messages-example.js

import React, { Component } from 'react'
import Firebase from 'firebase'
import ReactFireMixin from 'reactfire'
import reactMixin from 'react-mixin'
import LinkedStateMixin from 'react-addons-linked-state-mixin'

const ref = new Firebase('https://<APP NAME>.firebaseio.com/')

class Messages extends Component {
  constructor (props, context) {
    super(props, context)
    this.state = {
      newMessage: '',
      messages: []
    }
  }

  componentDidMount () {
    this.bindAsArray(ref.child('messages'), 'messages')
  }

  handleSubmit (event) {
    event.preventDefault()
    if (this.state.message === '') return false

    this.firebaseRefs.messages.push({
      message: this.state.name
    })

    this.setState({name: ''})
  }

  renderMessage (item) {
    return <li key={item['.key']}>{item.message}</li>
  }

  render () {
    return (
      <div>
        <input
          placeholder='New message'
          valueLink={this.linkState('message')}
        />

        <button onClick={this.handleSubmit.bind(this)}>create message</button>

        <ul>
          {this.state.messages.map(this.renderMessage)}
        </ul>
      </div>
    )
  }
}

reactMixin(Messages.prototype, ReactFireMixin)
reactMixin(Messages.prototype, LinkedStateMixin)

export default Messages