title: Page reloads on submitting form and nothing prints on console
body: <p>I'm new to Reactjs. I was watching an youtube tutorial and did exactly what he has done. When I submit form, the page reloads and nothing prints on the console, instead formdata should be printed on console.
  Also there is a warning on console.</p>
  <p>Warning:</p>
  <pre><code>Warning: A string ref, &quot;userInput&quot;, has been found within a strict mode tree. String refs are a source of potential bugs and should be avoided. We recommend using useRef() or createRef() instead. Learn more about using refs safely here: 
      in div (at create-exercise.component.js:76)
      in form (at create-exercise.component.js:75)
      in div (at create-exercise.component.js:73)
      in CreateExercise (created by Context.Consumer)
      in Route (at App.js:19)
      in div (at App.js:14)
      in Router (created by BrowserRouter)
      in BrowserRouter (at App.js:13)
      in App (at src/index.js:7)
      in StrictMode (at src/index.js:6)
  </code></pre>
  <p>Code:</p>
  <pre><code>import React, { Component } from &quot;react&quot;;
  import DatePicker from &quot;react-datepicker&quot;;
  import &quot;react-datepicker/dist/react-datepicker.css&quot;;
  
  export default class CreateExercise extends Component {
    constructor(props) {
      super(props);
  
      this.onChangeUsername = this.onChangeUsername.bind(this);
      this.onChangeDescription = this.onChangeDescription.bind(this);
      this.onChangeDuration = this.onChangeDuration.bind(this);
      this.onChangeDate = this.onChangeDate.bind(this);
      this.onSubmit = this.onSubmit.bind(this)
  
      this.state = {
        username: &quot;&quot;,
        description: &quot;&quot;,
        duration: &quot;&quot;,
        date: new Date(),
        users: [],
      };
    }
  
    componentDidMount() {
      this.setState({
        users: [&quot;test user&quot;],
        username: &quot;test user&quot;,
      });
    }
  
    onChangeUsername(e) {
      this.setState({
        username: e.target.value,
      });
    }
  
    onChangeDescription(e) {
      this.setState({
        description: e.target.value,
      });
    }
  
    onChangeDuration(e) {
      this.setState({
        duration: e.target.value,
      });
    }
  
    onChangeDate(date) {
      this.setState({
        date: date,
      });
    }
  
    onSubmit = (e) =&gt; {
      e.stopPropagation();
      e.nativeEvent.stopImmediatePropagation();
  
      const exercise = {
        username: this.state.username,
        description: this.state.description,
        duration: this.state.duration,
        date: this.state.date,
      };
  
      console.log(exercise);
  
      window.location = &quot;/&quot;;
    };
  
    render() {
      return (
        &lt;div&gt;
          &lt;h3&gt;Create New Exercise Log&lt;/h3&gt;
          &lt;form onSubmit={this.onSubmit}&gt;
            &lt;div className=&quot;form-group&quot;&gt;
              &lt;label&gt;Username: &lt;/label&gt;
              &lt;select
                ref=&quot;userInput&quot;
                required
                className=&quot;form-control&quot;
                value={this.state.username}
                onChange={this.onChangeUsername}
              &gt;
                {this.state.users.map(function (user) {
                  return (
                    &lt;option key={user} value={user}&gt;
                      {user}
                    &lt;/option&gt;
                  );
                })}
              &lt;/select&gt;
            &lt;/div&gt;
            &lt;div className=&quot;form-group&quot;&gt;
              &lt;label&gt;Description: &lt;/label&gt;
              &lt;input
                type=&quot;text&quot;
                required
                className=&quot;form-control&quot;
                value={this.state.description}
                onChange={this.onChangeDescription}
              /&gt;
            &lt;/div&gt;
            &lt;div className=&quot;form-group&quot;&gt;
              &lt;label&gt;Duration: &lt;/label&gt;
              &lt;input
                type=&quot;text&quot;
                required
                className=&quot;form-control&quot;
                value={this.state.duration}
                onChange={this.onChangeDuration}
              /&gt;
            &lt;/div&gt;
            &lt;div className=&quot;form-group&quot;&gt;
              &lt;label&gt;Date: &lt;/label&gt;
              &lt;div&gt;
                &lt;DatePicker
                  selected={this.state.date}
                  onChange={this.onChangeDate}
                /&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div className=&quot;form-group&quot;&gt;
              &lt;input
                type=&quot;submit&quot;
                value=&quot;Create Exercise Log&quot;
                className=&quot;btn btn-primary&quot;
              /&gt;
            &lt;/div&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  <p>I don't understand what is the problem. I have googled the problem and unable to get the answer. so I posted question here.</p>