How can I export if / else if statements into the function inside Class component? react, node, express

user_14557778 0
Viewed 55

I am trying to make my code more dry and move if / else if statements that handles error out of the component. How can I export it and import it from another file? Example code below:

  // PASSWORD ERROR HANDLING
    if (!this.state.password || !this.state.password.trim()) {
      this.setState({
        errorPassword: "Enter your password.",
      });
    } else if (
      this.state.password.length < 8 ||
      this.state.password.trim().length < 8
    ) {
      this.setState({
        errorPassword: "Your password should have at least 8 characters long.",
      });
    } else if (this.state.password.trim().length > 127) {
      this.setState({
        errorPassword: "Your password can't be longer than 127 characters.",
      });
    } else {
      this.setState({
        errorPassword: "",
        errorPasswordStatus: false,
      });
    }
reactjs express node.js javascript
3 Answers

In this scenario as you are maintaining the validation status in component state, Write a function which validates the password and returns the validation status. ie

export const validatePassword = (password) => {
  // PASSWORD ERROR HANDLING
  if (!password || !password.trim()) {
    return {
      errorPassword: "Enter your password.",
    };
  } else if (password.length < 8 || password.trim().length < 8) {
    return {
      errorPassword: "Your password should have at least 8 characters long.",
    };
  } else if (password.trim().length > 127) {
    return {
      errorPassword: "Your password can't be longer than 127 characters.",
    };
  } else {
    return {
      errorPassword: "",
      errorPasswordStatus: false,
    };
  }
};

Now you can import this function in whichever file you want import {validatePassword } from "./xyz file;

Finally use this function to set component state as

this.setState(validatePassword(this.state.password));
user_97535130

You can define such function in an external file:

export const myFunction = (password) => {
    let errorPassword = null;
    let errorPasswordStatus = null;

    if (!password || !password.trim()) {
      errorPassword = "Enter your password.";
    } else if (
      password.length < 8 ||
      password.trim().length < 8
    ) {
      errorPassword = "Your password should have at least 8 characters long.";
    } else if (password.trim().length > 127) {
      errorPassword = "Your password can't be longer than 127 characters.";
    } else {
      errorPassword = "";
      errorPasswordStatus = false;
    }

    return [errorPassword, errorPasswordStatus];
}

then import it and use it like so:

const passwordArray = myFunction(this.state.password);
const errorPassword = passwordArray[0];
const errorPasswordStatus = passwordArray[1];

this.setState(prevState => {
    return {
        ...prevState,
        errorPassword,
        errorPasswordStatus: (errorPasswordStatus!==null) ? errorPasswordStatus : prevState.errorPasswordStatus
    };
});
user_127613690

In another file :

export const validatePassword = (password,setStateCallback) => {
    let errorPassword = null;

    if (!password || !password.trim()) {
      errorPassword = "Enter your password.";
    } else if (
      password.length < 8 ||
      password.trim().length < 8
    ) {
      errorPassword = "Your password should have at least 8 characters long.";
    } else if (password.trim().length > 127) {
      errorPassword = "Your password can't be longer than 127 characters.";
    } else {
      errorPassword = "";
    }
    setStateCallback({
        errorPassword,
        errorPasswordStatus : !!errorPassword
      })
};

In your current file :

setStateCallback = state => this.setState(state)
user_83234420
Related