Question 375923 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Can't access hook in a function

I was trying to access a hook that i created into another function (function handleValidation) but that hook and its values were not available. When I tried to check if the function was working using a alert (example :alert(password)) I got the value for password as "undefined" …..help please



 const [values, setValues] = useState({
    username: "",
    email: "",
    password: "",
    confirmPassword: "",
  });



  // Handling change
  const handleChange = (event) => {
    setValues({ values,[event.target.name]: event.target.value });
  };


    // Submit functionality
    const handleSubmit = (event) => {
      event.preventDefault();
      handleValidation();
    };



  // Validating form
  const handleValidation = () => {
    const { password,confirmPassword,username, email } = values;
      console.log(password)
    
    if (password !== confirmPassword) {
      console.log("Match", toast);
      toast.error(
        "Password and confirm password should be same.",
        toastOptions
      );
      return false;
    } else if (username === "") {
      toast.error(
        "Username should be greater than 3 characters.",
        toastOptions
      );
      return false;
    } else if (password.length < 8) {
      toast.error(
        "Password should be equal or greater than 8 characters.",
        toastOptions
      );
      return false;
    } else if (email === "") {
      toast.error("Email is required.", toastOptions);
      return false;
    }

    return true;
  };

I am trying to check if the credentials entered in the form meet certain rules,

Tags:

2

Answers


  1. 0

    is this code in one function or multiple files and you gathered them ?

    are they in a function or top level code ?

    can you please provide more code or just post the whole page of code here

    Login or Signup to reply.
  2. 0

    The issue in handleChange

    Solution

    const handleChange = (event) => {
  setValues({ ...values,[event.target.name]: event.target.value });
}

    You forgot to add spread operator before values

    More Explain

    For example when you type h in the username input using your code, handleChange function will run and update values object, BUT not as you expected. When you console.log values:

    {
  values: {
    username: "",
    email: "",
    password: "",
    confirmPassword: ""
  },
  username: "h",
}

    and after typing one more character it will be a big mess:

    {
  values: {
    values: {
      username: "",
      email: "",
      password: "",
      confirmPassword: ""
    },
    username: "h"
  },
  username: "hh",
}

    and it will get worse, and that is why you could not find password inside the values object.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search