Making a form
// **** 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.