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

How to export a function on another function in javascript (reactjs)?

I want to use the function handleSubmit in other file, how i can export this function?
If i try to export this function this error appear "Modifiers cannot appear here".

export default function LoginPage(props) {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [errorMessage, setErrorMessage] = useState("");
  const navigate = new useNavigate();

  const handleSubmit = async (event) => {
    event.preventDefault();
    const response = await fetch("http://localhost:5000/logUser");
    const data = await response.json();
    const user = data.find(
      (user) => user.email === email && user.password === password
    );
    
    if (user) {
      // Login successful
      if (user.categoryId === 1) {
        return true;
      } else if (user.categoryId === 2) {
        return true;
      }
    } else {
      setErrorMessage("Invalid email or password");
      return false;
    }
  };

  return (
    <div className="LoginPage"></div>
  );
}

I have tried to export but i can’t.

Tags:

2

Answers


  1. 0

    The easiest way is to get the handleSubmit function out of the component like this:

    export default function LoginPage(props) {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [errorMessage, setErrorMessage] = useState("");
  const navigate = new useNavigate();

  const data = {email, password}

  const submitForm = () => {
    const formError = await handleSubmit(email, password);
    setErrorMessage(formError)
  }

  return (
    <div className="LoginPage">
      <button onClick={submitForm}>Submit</button>
    </div>
  );
}

export const handleSubmit = async (email, password) => {
    let = errorMessage = ""; 
    const response = await fetch("http://localhost:5000/logUser");
    const data = await response.json();
    const user = data.find(
      (user) => user.email === email && user.password === password
    );
    
    if (!user) {
      errorMessage = "Invalid email or password"
    }
   return errorMessage;
};

    Then, in other files, you can import handleSubmit. Note that you’ll have to modify the handleSubmit function.

    import {handleSubmit} from "../file/path";

    However, I recommend you check custom hooks as well. It’s the proper solution: https://beta.reactjs.org/learn/reusing-logic-with-custom-hooks

    Login or Signup to reply.
  2. 0

    There are two ways that I see:

    1. Take it out of the function as the other person above says and then export it and import into your other file/component.
    2. or create a separate file for handling events logic and use that file to export and import what you need.

    This way it creates a cleaner and more understandable code base…if you weren’t using the submit function anywhere else than I’d say keep it in your current component that is using it, otherwise it might be better to separate it for ease of use.

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

Back To Top
Search