Forget password in React JS

In my log in page I have a button “Forget my password”,
I need, when I click in this button to go to the correct page.

In my current code, when I click “forget my password”, it shows under the login, which mean at the same page I see the “login” and the “forget password”.

What I need is to see just the “forget my password” page.

Here is my code :

import React from "react";
import ForgetPage from "../ForgetPasswrod/Forgotpass"
import {Link,useParams,  useRouteMatch,Route, Switch, BrowserRouter} from 'react-router-dom';

class Forget extends React.Component{

   Forget password -

  //  let  match = useRouteMatch();

        {" "} <Link to="/forgetPassword"  className="forget">Forgot password?</Link>
          <Route  path="/forgetPassword" exact strict component={(ForgetPage)} />




export default Forget;

The page of log in

import React from "react";
import Username from "./UserName";
import Password from "./Password";
import Submit from "./Submit";
import Rememberme from "./RememberMe";
import Cancel from "./Cancel";
import ForgetPass from "./Forget"

class Hub extends React.Component {

state={userName:"Log", password : "In"}

    this.setState({userName: user});

callbackPassword = (pass) => {
     this.setState({ password: pass});

<h1> {this.state.userName} {this.state.password}</h1>
    <form className="modal-content animate">

        <Username userHub={this.callbackUsername}/>
        <Password passHub={this.callbackPassword}/>


        <div className="container">



export default Hub;

Here is Solutions:

We have many solutions to this problem, But we recommend you to use the first solution because it is tested & true solution that will 100% work for you.

Solution 1

Please try this example:

import React from "react";

export default class Login extends React.Component {
    constructor(props) {
        this.state = {forgot: false};

    login() {
        alert('Login will work here');
    forgot() {
        this.setState({forgot: true})

    render() {
        return (
                {this.state.forgot === false && <div>
                    Username: <input/> <br/>
                    Password: <input/><br/>
                    <button onClick={this.forgot.bind(this)}>Forgot</button>
                    <button onClick={this.login.bind(this)}>Login</button>
                {this.state.forgot === true && <ForgotPassword/>}

class ForgotPassword extends React.Component {

    reset() {
        alert('Password is sent to your email');

    render() {
        return (<div><h1>Write your email</h1>
            <button onClick={this.reset.bind(this)}>Reset Password</button>


Note: Use and implement solution 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from or, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply