score:1

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;

score:1

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
   }

}

score:2

// 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>
  )
}

Related Query

More Query from same tag