title: How to save input default value in ReactJS
body: <p>I'm working on my first project and I found another problem. My professor told me, my edit form can't be empty at start and it has to store default values. And that's what I've made. Sadly I found it problematic. What's wrong? 
  First thing:
  *My default input can't be changed. 
  Second:
  *Even when my default value is visible for me, after POST it sends "" as value. </p>
  
  <p>I've tried a lot of things, like setting value from this.state.userResponse.map, but ofcourse it fails. Even tried to escape React and save default values into LocalStorage only to make it work.</p>
  
  <pre><code>
  class EditProtege extends Component {
    state = {
      firstname: "",
      userResponse: []
    };
  
    getUserByID() {
      fetch(`http://localhost:9000/proteges/${utils.i}`)
        .then(res =&gt; res.json())
        .then(res =&gt; this.setState({ userResponse: res }))
        .catch(err =&gt; err);
    }
  
    handleNameChange = event =&gt; {
      this.setState({ firstname: event.target.value });
    };
  
    handleSubmit = event =&gt; {
      event.preventDefault();
      axios
        .put(`http://localhost:9000/proteges/${utils.i}`, {
          firstname: this.state.firstname,
        })
        .then(res =&gt; {
          console.log(res);
          console.log(res.data);
        });
  
      window.location.reload();
    };
  
  
    componentDidMount() {
      this.getUserByID();
      //this.setDefaultValues();
    }
  
    render() {
      return (      
        &lt;div className="creation-form"&gt;
          {this.state.userResponse.map(resp =&gt; (
          &lt;div&gt;
            &lt;br /&gt;
            &lt;rb.Form onSubmit={this.handleSubmit}&gt;
              &lt;rb.FormGroup&gt;
                &lt;rb.Row&gt;
                  &lt;rb.Col md={12}&gt;
                    &lt;rb.FormControl
                      type="text"
                      name="firstname"
                      size="md"
                      onChange={this.handleNameChange}
                      placeholder="Name"
                      default={this.userResponse.proteges}
                      required
                    /&gt;
                  &lt;/rb.Col&gt;
              &lt;/rb.FormGroup&gt;
              &lt;rb.Button type="submit" variant="dark" size="lg" block&gt;
                 Zatwierdź edycję
              &lt;/rb.Button&gt;
            &lt;/rb.FormGroup&gt;
          &lt;/rb.Form&gt;
        &lt;/div&gt;
        ))}
      &lt;/div&gt;
      );
    }
  }
  
  export default EditProtege;
  </code></pre>
  
  <p>Like I've said before, I want to POST default value and to be able to change it if I want to. Now its untouchable and sends empty string.</p>
  
  <p>UPDATE: changed default into defaultValue and it seems like I can edit it again, still, problem with saving this data still occurs.</p>