Page reloads on submitting form and nothing prints on console

Question

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.

Warning:

Warning: A string ref, "userInput", 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:

import React, { Component } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

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: "",
      description: "",
      duration: "",
      date: new Date(),
      users: [],
    };
  }

  componentDidMount() {
    this.setState({
      users: ["test user"],
      username: "test user",
    });
  }

  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) => {
    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 = "/";
  };

  render() {
    return (
      <div>
        <h3>Create New Exercise Log</h3>
        <form onSubmit={this.onSubmit}>
          <div className="form-group">
            <label>Username: </label>
            <select
              ref="userInput"
              required
              className="form-control"
              value={this.state.username}
              onChange={this.onChangeUsername}
            >
              {this.state.users.map(function (user) {
                return (
                  <option key={user} value={user}>
                    {user}
                  </option>
                );
              })}
            </select>
          </div>
          <div className="form-group">
            <label>Description: </label>
            <input
              type="text"
              required
              className="form-control"
              value={this.state.description}
              onChange={this.onChangeDescription}
            />
          </div>
          <div className="form-group">
            <label>Duration: </label>
            <input
              type="text"
              required
              className="form-control"
              value={this.state.duration}
              onChange={this.onChangeDuration}
            />
          </div>
          <div className="form-group">
            <label>Date: </label>
            <div>
              <DatePicker
                selected={this.state.date}
                onChange={this.onChangeDate}
              />
            </div>
          </div>
          <div className="form-group">
            <input
              type="submit"
              value="Create Exercise Log"
              className="btn btn-primary"
            />
          </div>
        </form>
      </div>
    );
  }
}

I don't understand what is the problem. I have googled the problem and unable to get the answer. so I posted question here.

Answer 1

So, none of these answers solved the actual error. I had to turn to the React documentation where it explains what it is looking for in place of using a straight ref in a DOM element. in constructor (props) add "this.textInput = React.createRef()" and then change the "ref="userInput"" to ref={this.textInput} and the error is gone.

The advice on clicking the preserve log tab in Chrome's console was helpful or else the console log results just pop up for a second before the redirect.

Adding a Ref to a DOM Element

This code uses a ref to store a reference to a DOM node:

 class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);
    // create a ref to store the textInput DOM element
    this.textInput = React.createRef();
    this.focusTextInput = this.focusTextInput.bind(this);
  }

  focusTextInput() {
    // Explicitly focus the text input using the raw DOM API
    // Note: we're accessing "current" to get the DOM node
    this.textInput.current.focus();
  }

  render() {
    // tell React that we want to associate the <input> ref
    // with the `textInput` that we created in the constructor
    return (
      <div>
        <input
          type="text"
          ref={this.textInput} />
        <input
          type="button"
          value="Focus the text input"
          onClick={this.focusTextInput}
        />
      </div>
    );
  }
}

     

Answer 2

Using Strictmode in React will throw error if you use console.log To prevent this use

ReactDOM.render(<App/>,document.getElementById("root"));

The console message will not appear as

window.location = '/';

reroutes the pages and refreshes console.

Add some delay before rerouting and console message will be visible or enable preserve console log . Sample

 for (let index = 0; index < 1000000000; index++) { ;}
 window.location = '/';

Answer 3

Hey i am following the same tutorial and i figured out the answer

in index.js

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

to

ReactDOM.render(<App />, document.getElementById("root"));

it will fix the error.

and to display the exercise in the console,

• go to console settings( top right)
• select the checkbox for preserve console log

Answer 4

To fix this (on chrome), you need to click on the settings in console log and click preserve log.

Answer 5

You can prevent the form from submitting your form by using e.preventDefault()

onSubmit = (e) => {
    e.preventDefault();
    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 = "/";
  };

Use of string refs like <Component ref="refComponent" /> are deprecated.

Instead use React.createRef(); https://reactjs.org/docs/refs-and-the-dom.html

Answer 6

To avoid page reload when submitting form you have to write this line :

e.preventDefault()

For the strict tree, I think it is because you have wrapped your root component inside StrictMode in index.js file