Why can't I type anything into my form inputs Why can't I type anything into my form inputs
I have a ReactJS app. I am trying to implement form validation by the accepted answer here as my example. I had to adapt it some because I am using a Function and not a Component (i.e. I don't have a constructor).
Here is the whole function:
import React, { useState } from "react";
import Config from 'config';
import PropTypes from "prop-types";
import "./Login.css";
export default function ChangePassword({ setToken }) {
    const [fields, setFields] = useState({});
    const [errors, setErrors] = useState({});
    
    const tokenString = sessionStorage.getItem("token");
    const token = JSON.parse(tokenString);
    let headers = new Headers({
        "Accept": "application/json",
        "Content-Type": "application/json",
        'Authorization': 'Bearer ' + token.token
    });
    async function changePassword(password) {
        return fetch(Config.apiUrl + "/api/Users/ChangePassword", {
            method: "POST",
            headers: headers,
            body: password
        })
            .then((response) => {
                return response.json();
            });
    }
    function handleValidation() {
        let formErrors = {};
        let formIsValid = true;
        //Password
        if (!fields["password"]) {
            formIsValid = false;
            formErrors["password"] = "Cannot be empty";
        }
        if (typeof fields["password"] !== "undefined") {
            if (!fields["password"].match(/^[a-zA-Z0-9!@#$%^&?]+$/)) {
                formIsValid = false;
                formErrors["password"] = "Only accepted";
            }
        }
        //Confirm Password
        if (!fields["confirmPassword"]) {
            formIsValid = false;
            formErrors["confirmPassword"] = "Cannot be empty";
        }
        if (typeof fields["confirmPassword"] !== "undefined") {
            if (!fields["confirmPassword"].match(/^[a-zA-Z0-9!@#$%^&?]+$/)) {
                formIsValid = false;
                formErrors["confirmPassword"] = "Only accepted";
            }
        }
        if (fields["confirmPassword"] != fields["password"]) {
            formIsValid = false;
            formErrors["confirmPassword"] = "Does not match Password";
        }
        setErrors({ formErrors });
        return formIsValid;
    }
    const handleSubmit = async e => {
        e.preventDefault();
        if (handleValidation()) {
            const myToken = await changePassword(fields["password"]);
            setToken(myToken);
        } else {
            alert("Form has errors.")
        }            
    }
    function handleChange(field, e) {
        let myFields = fields;
        myFields[field] = e.target.value;
        setFields({ myFields });        
    }
    return (
        <div className="login wrapper fadeInDown">
            <div className="login formContent ">
                <h1 className="login centered">Change Password</h1>                
                <form onSubmit={handleSubmit}>                    
                    <div className="centered">
                        <span style=>{errors["password"]}</span>
                        <input type="password" value={fields["password"] || ""} onChange={e => handleChange.bind(this, "password")} id="login" className="login fadeIn second" placeholder="Password" />
                    </div>
                    <div className="centered">
                        <span style=>{errors["confirmPassword"]}</span>
                        <input type="password" value={fields["confirmPassword"] || ""} onChange={e => handleChange.bind(this, "confirmPassword")} id="login" className="login fadeIn third" placeholder="Confirm Password" />
                    </div>
                    <div className="centered">
                        <input type="submit" className="login fadeIn fourth" value="Submit" />
                    </div>
                </form>
            </div>  
        </div>
    )
}
ChangePassword.propTypes = {
    setToken: PropTypes.func.isRequired
}
The function loads, but I cannot type anything in Password or Confirm Password. For the life of me I can't figure out why. I am hoping a kind SO user will point out my error(s).
from Stackoverflow
Comments
Post a Comment