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

Reactjs – error when calling custom hook from onSubmit

I am very new to React and I am trying to create a hook and call it from the onSubmit event but it gives me an error.

My code for the onSubmit function is the following:

    const onSubmit = ( event ) => {
        event.preventDefault();
        setFormSubmited( true );
        if( !isFormValid ) return;
        
        const { send, setMessageuseMail } = useMail(); 
    }

The hook I created is called useMail and it is this

import { useState } from "react"

export const useMail = () => {
    const [send, setSend] = useState(false);
    const [messageMail, setMessageMail] = useState();

    setSend( true );
    setMessageMail(' Pruebas ');

    return {
        send,
        messageMail
    }
}

and the error it gives me is this:

ERROR
[eslint] srccomponentsContactUs.jsx
Line 43:45: React Hook "useMail" is called in function "onSubmit" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use" react-hooks/rules-of-hooks

Search for the keywords to learn more about each error.

Image Error

I already tried to remove the word "use" from the file and I couldn’t make it work, could you please help me?

Tags:

3

Answers


  1. 0

    Change your component name to UseMail.

    React components must start with uppercase letter as error clearly shows.

    Login or Signup to reply.
  2. 0

    You need to move the call to useMail outside of the onSubmit function.

    const { send, messageMail } = useMail();
const onSubmit = (event) => {
    event.preventDefault();
    ...
}

    React hooks need to be called at the top-level so they are called each time the component renders and in the same order.

    Check out the documentation for the rules for hooks: https://legacy.reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level

    The error message is saying React hooks must be called from either a component or another hook. If onSubmit is one of these, it needs to be updated to comply with the naming convention (capital for component, use for hooks). But in this case onSubmit isn’t so we need to move where we’re calling the hook.

    Login or Signup to reply.
  3. 0

    The error you’re encountering is due to the fact that React hooks, including custom ones like useMail, should only be called at the top level of a React function component or another custom hook. You are calling the useMail hook inside the onSubmit function, which violates the rules of hooks.

    Here’s how you can refactor your code to address this issue:

    import React, { useState } from 'react';

// Define the useMail hook outside of the component
export const useMail = () => {
  const [send, setSend] = useState(false);
  const [messageMail, setMessageMail] = useState();

  setSend(true);
  setMessageMail(' Pruebas ');

  return {
    send,
    messageMail,
  };
};

const ContactUs = () => {
  // Call the useMail hook at the top level of the component
  const { send, messageMail } = useMail();

  const onSubmit = (event) => {
    event.preventDefault();
    setFormSubmited(true);
    if (!isFormValid) return;

    // Now you can use the values returned from the useMail hook
    // Do whatever you need with send and messageMail
  };

  return (
    // JSX for your component
  );
};

export default ContactUs;

    By moving the useMail hook call outside of the onSubmit function and calling it at the top level of the component, you should no longer encounter the "React Hook" error.

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

Back To Top
Search