How do I clear the input values in a react form? - forms

Question

In my code I have mention preventDefault method on onSubmit event and due to that my page is not getting reload when user enter data in form...
Can you tell me any way by which I can export data to firebase and also reload my page automatically!
Here is the code:
import React, { Component } from 'react';
const firebase = require('firebase');
const uuid = require('uuid');
var config = {
apiKey: "AIzaSyAtpOSiCqFy43ZTE-7CJdcHrIGNN1GrsSk",
authDomain: "electronic-health-record-a795c.firebaseapp.com",
databaseURL: "https://electronic-health-record-a795c.firebaseio.com",
projectId: "electronic-health-record-a795c",
storageBucket: "electronic-health-record-a795c.appspot.com",
messagingSenderId: "545743770560"
};
firebase.initializeApp(config);
class Usurvey extends Component {
constructor(props) {
super(props);
this.state = {
uid: uuid.v1(),
firstName: '',
lastName: '',
};
this.submitData = this.submitData.bind(this);
this.inputData = this.inputData.bind(this);
}
componentDidMount() {
firebase
.database()
.ref(`Newdata/${this.state.uid}`)
.on('value', snap => console.log('from db', snap.val()));
}
submitData(event) {
event.preventDefault();
firebase
.database()
.ref(`Newdata/${this.state.uid}`)
.set({
firstName: this.state.firstName,
lastName: this.state.lastName,
})
.catch(error => console.log(error));
}
inputData(event) {
const firstName = this.refs.name1.value;
const lastName = this.refs.name2.value;
this.setState({ firstName, lastName });
}
render() {
return (
<div>
<form onSubmit={this.submitData}>
<input type="text" onChange={this.inputData} ref="name1" />
<input type="text" onChange={this.inputData} ref="name2" />
<input type="submit" />Submit
</form>
</div>
);
}
}
export default Usurvey;

Answer 1

This is how it should be
class Usurvey extends Component {
constructor(props) {
super(props);
this.state = {
uid: uuid.v1(),
firstName: '',
lastName: '',
};
this.submitData = this.submitData.bind(this);
this.inputData = this.inputData.bind(this);
}
componentDidMount() {
firebase
.database()
.ref(`Newdata/${this.state.uid}`)
.on('value', snap => console.log('from db', snap.val()));
}
submitData(e) {
const { firstName, lastName } = this.state;
e.preventDefault();
firebase
.database()
.ref(`Newdata/${this.state.uid}`)
.set({
firstName: firstName,
lastName: lastName,
})
.catch(error => console.log(error));
this.setState({
firstName: '', lastName: ''
});
}
inputData(e) {
this.setState({ [e.target.name]: e.target.value });
}
render() {
return (
<div>
<form onSubmit={this.submitData}>
<input type="text" value={this.state.firstName} onChange={this.inputData} name="firstName" />
<input type="text" value={this.state.lastName} onChange={this.inputData} name="lastName" />
<button type="submit">Submit</button>
</form>
</div>
);
}
}
export default Usurvey;
You directly update your state as the user inputs in the form, also on your submission you reset your form, so the user can add more information in the form.

Answer 2

If you want to upload your data and reload after it has finished you can do sth like this:
submitData(event) {
event.preventDefault();
firebase
.database()
.ref(`Newdata/${this.state.uid}`)
.set({
firstName: this.state.firstName,
lastName: this.state.lastName,
})
.then(() => {
location.reload();
// or window.location.reload() if location is undefined
})
.catch(error => console.log(error));
}