title: React: form is clean when I refresh the page
body: <p>I'm new using React. I have a component called UpserProfile that fetch data from Firebase and put this data in a form. The goal is that the user be able to edit his data/profile.</p>
  <p>The problem is: the data is loaded when I load the page. However, if I refresh the page, the form fields become empty/clean. What I'm doing wrong? Someone can help me to increase the code, please?</p>
  <pre><code>    class UserProfile extends React.Component{
      
          constructor(props){
              super(props);
              this.state = {
                  authUser: null,
                  userProfile: new UserProfileModel() // A model with all available properties seted with default values
              }
          }
      
      /**
       * Use auth listner to see if it had an user authenticated
       */
      componentDidMount() {
          this.props.firebase.auth.onAuthStateChanged((authUser) =&gt; {
              this.props.firebase.getUserData(authUser.uid).then((response)=&gt;{     
                  this.setState({ userProfile: {
                      id: response.id,
                      displayName: response.displayName || &quot;&quot;, 
                      name: response.name || &quot;&quot;, 
                      email: response.email || &quot;&quot;,
                  }});
              });
          });
      }
      
      handleInputChange = (event) =&gt; {
          let value = event.target.value;
          // If it's the termsAndPrivacy checkbox 
          this.setState({ [event.target.name]: value});
      }
      
      
      onSubmit = (event) =&gt; {
          // Prevent to submit the form
          event.preventDefault();
      
          this.props.firebase.user(this.userProfile.id).set(this.userProfile)
            .then(authUser =&gt; {
                console.log(&quot;Changed user:&quot;, authUser);
            })
            .catch(error =&gt; {
              console.log(&quot;Error: &quot;, error);
              this.setState({ error });
          });
      }
      
      
      render(){
          return(
              &lt;div&gt;
                  &lt;BreadCrumb pageTitle=&quot;Edit Profile&quot;/&gt;
                  &lt;section className=&quot;container main-content&quot;&gt;
                      &lt;div className=&quot;row&quot;&gt;
                          &lt;div className=&quot;col-md-12&quot;&gt;
                              &lt;div className=&quot;page-content&quot;&gt;
                                  &lt;div className=&quot;boxedtitle page-title&quot;&gt;&lt;h2&gt;Edit Profile&lt;/h2&gt;&lt;/div&gt;
                                  &lt;div className=&quot;form-style form-style-4&quot;&gt;
                                      &lt;form onSubmit={this.onSubmit}&gt;
                                          &lt;div className=&quot;form-inputs clearfix&quot;&gt;
                                              &lt;p&gt;
                                                  &lt;label&gt;Display Name*&lt;/label&gt;
                                                  &lt;input name=&quot;displayName&quot; type=&quot;text&quot; onChange={this.handleInputChange} value={this.state.userProfile.displayName}/&gt;
                                              &lt;/p&gt;    
                                              &lt;p&gt;
                                                  &lt;label&gt;Full name&lt;/label&gt;
                                                  &lt;input name=&quot;name&quot; type=&quot;text&quot; onChange={this.handleInputChange} value={this.state.userProfile.name}/&gt;
                                              &lt;/p&gt;
                                              &lt;p&gt;
                                                  &lt;label className=&quot;required&quot;&gt;E-Mail&lt;span&gt;*&lt;/span&gt;&lt;/label&gt;
                                                  &lt;input name=&quot;email&quot; type=&quot;email&quot; onChange={this.handleInputChange} value={this.state.userProfile.email}/&gt;
                                              &lt;/p&gt;...
  </code></pre>
  <p>Can someone help me, please?</p>
  <p>UPDATE:
  This is my Firebase Class:</p>
  <pre><code>import app from 'firebase/app';
  import 'firebase/auth';
  import 'firebase/database';
  import { UserProfileModel } from '../Models/UserProfileModel';
  
   const firebaseConfig = {
      apiKey: &quot;AI------------------&quot;,
      authDomain: &quot;mysite.firebaseapp.com&quot;,
      databaseURL: &quot;https://mysite.firebaseio.com&quot;,
      projectId: &quot;myprojectid&quot;,
      storageBucket: &quot;mysite.appspot.com&quot;,
      messagingSenderId: &quot;---------1&quot;,
      appId: &quot;1--------------&quot;
    };
  
    export default class Firebase {
      constructor() {
        app.initializeApp(firebaseConfig);
        this.auth = app.auth();
        this.db = app.database();
      }
  
  async getUserData(uid){
        var userData = new UserProfileModel();
        this.user(uid).on('value', (snapshot) =&gt; {
            snapshot.forEach((childSnapshot) =&gt; {
                var keyName = childSnapshot.key;
                var childData = childSnapshot.val();
                userData[keyName] = childData;
            });
        });
        return userData;
      }
  
      // *** USER APO ***
  
      user = uid =&gt; this.db.ref(`users/${uid}`);
      users = () =&gt; this.db.ref('users');
  </code></pre>