title: React: reset password send email with reset password link to reset the password
body: <p>I am trying to create a <code>forgot password</code> component which has an <code>email field</code>. The user will enter his email. Now, this component should send a <code>password reset email</code> to that entered email.</p>
  
  <p>The user will then click on that email link in his mail client which will redirect the user to another <code>password reset page</code> where the user will enter his <code>email</code>, <code>new-password</code>, and <code>confirm password</code>.</p>
  
  <p>how do I achieve this? So far, I have just able to create a <code>forgot password</code> page. Not sure, how to proceed.</p>
  
  <p><code>Code for my forgot password</code>:</p>
  
  <pre><code>import React, { useState } from "react";
  import { useHistory } from "react-router-dom";
  
  import { Button, Form, Input, InputGroup, InputGroupAddon } from "reactstrap";
  
  const ResetPassword = () =&gt; {
    const [email, setEmail] = useState("");
  
    const history = useHistory();
  
    const validateForm = () =&gt; {
      return email.length &gt; 0;
    };
  
    const handleSubmit = (event) =&gt; {
      event.preventDefault();
    };
  
    return (
  
        &lt;div className="password-reset"&gt;
          &lt;div className="password-reset-form-container"&gt;
  
            &lt;div className="content"&gt;
              &lt;Form className="password-reset-form"&gt;
                &lt;h3 className="form-title"&gt;Password Reset&lt;/h3&gt;
                &lt;InputGroup&gt;
                  &lt;InputGroupAddon
                    className="input-group-addon"
                    addonType="prepend"
                  &gt;
                    &lt;i className="fa fa-user"&gt;&lt;/i&gt;
                  &lt;/InputGroupAddon&gt;
                  &lt;Input
                    autoFocus
                    type="email"
                    aria-label="Username"
                    aria-describedby="username"
                    aria-invalid="false"
                    placeholder="Email"
                    value={email}
                    onChange={(e) =&gt; setEmail(e.target.value)}
                  /&gt;
                &lt;/InputGroup&gt;
  
                &lt;div className="form-actions"&gt;
                  &lt;Button
                    className="pull-left"
                    block
                    bssize="small"
                    type="submit"
                    onClick={() =&gt; history.push("/")}
                  &gt;
                    Cancel
                  &lt;/Button&gt;
  
                  &lt;Button
                    className="pull-right"
                    block
                    bssize="small"
                    disabled={!validateForm()}
                    type="submit"
                    onSubmit={handleSubmit}
                  &gt;
                    Reset
                  &lt;/Button&gt;
                &lt;/div&gt;
              &lt;/Form&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  
  export default ResetPassword;
  </code></pre>