How to clear input values ​​in reaction form?

Question

In my code, I mentioned the preventDefault method for the onSubmit event and because of this, my page does not receive a reload when the user enters data in the form ...

Can you tell me how I can export data to firebase and also automatically load my page!

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 when a user enters a form, as well as when you submit a reset of your form so that the user can add additional information to the form.

Answer 2

If you want to upload your data and reload it after completion, you can do it 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));
  }