How to validate the form and send user to another page on successful data filled in form fields in React JS?

Question

I want to send a user to Successful component of ReactJS after form with user and password has been filled up.

Here is the code:

import React from 'react';
import Successful from './Successful';

class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      user: '',
      pass: ''
    }
  }

  onsubmit = () => {
    <Successful/>
  }

  render() {
    return (
      <form onSubmit={this.onsubmit}>
        <div className="App">
          <input type="text"
            placeholder="Enter user"
            validate="required"
            onChange={() => this.state.user}
          />
          <input type="password"
            placeholder="Enter password"
            validate="required"
            onChange={() => this.state.password}
          />
          <button type="submit">Submit</button>
        </div>
      </form>
    )
   }
   }

   export default App;

score 2 · Answer 1 · edited Feb 01 '21 at 15:30

What I undestand you want to do is validate the password to see if it matches a user's password, if that happends, then redirect the user to another page? In that case, what you are doing good. Your validation logic should be located inside your onsubmit method, which triggers automatically when the user submits the form.

Inside that method you first, you should catch your form submit event, to prevent your page from reloading (which is the default behaviour when submitting a form). To do this, you receive the event object (which is passed automatically), and call it's preventDefault method:

onsubmit = (event) => {
  event.preventDefault() // To prevent page reloading...
}

Here you check wheter the password entered is correct with a simple conditional, and then, there is the redirection part. I see you are just returning the component you wanna render (<Successful />). If what you wanna do is just show this component on the same page, you should add a new state property, that controls wheter the form input was successful or not, and then show or hide that component based on that state:

// Add the success prop
this.state = {
  user: "",
  pass: "",
  success: false
}

onsubmit = (event) => {
  event.preventDefault()
  
  // Check if your password is valid...
  // If its valid, then:
  this.state.success = true
}

render() {
  return (
    <div>
      ... your other stuff here ...

      {this.state.successful && <Successful />} 
    </div>
  )
}

What {this.state.successful && <Successful />} does is that it only renders the component after &&, if the condition is true. Because of your validation process, this.state.successful is only true if the entered password passed the validation process, so your success component gets rendered only if the condition is fulfilled. The brackets in {this.state.... && <Successful />} are required.

If what you want to do is really redirect your user to another page, you should use something like react-router-dom (a library that allows you to do redirecting) and instead return its <Redirect /> component or browserHistory method. Its really too long to explain here, but you can check this or look for some tutorial on react-router because is an extensive library.

score 1 · Answer 2 · answered Feb 01 '21 at 15:18

import React from 'react';
import Successful from './Successful';

class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      user: '',
      pass: '',
      success: false
    }
  }

  onsubmit = () => {
    this.state.setState({success:true})
    
  }

  const form = <form onSubmit={this.onsubmit}>
        <div className="App">
          <input type="text"
            placeholder="Enter user"
            validate="required"
            onChange={() => this.state.user}
          />
          <input type="password"
            placeholder="Enter password"
            validate="required"
            onChange={() => this.state.password}
          />
          <button type="submit">Submit</button>
        </div>
      </form>

  render() {
    return (
      {!this.state.success ? form :
      <Successful/>}
   }

   export default App;

Something like this could work. Here I added a "success" variable to the state. Initally set as false so the "form" is return and rendered. onSubmit we set the state to true, this triggers a re-render and then we return the componant instead. (I think I set the state correctly, I usually use hooks these days)

score 1 · Answer 3 · answered Feb 01 '21 at 15:24

import { useHistory } from "react-router-dom";   //this goes on top
const history = useHistory();
onsubmit = () => {
  //your logic for user input validation goes here  
  if(input is validated) {
    history.push("/success");
   }
   else {
    //show error here
   }

}

Since you have added react-router in the tags. I am assuming that you have a route with success componenent.

How to validate the form and send user to another page on successful data filled in form fields in React JS?

3 Answers3