How to solve Invalid hook call in ReactJS?

Question

I want to call a useFetch function in my project. I have to get 3 parameters for running this API. I created a function for that but there is an error:

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

 26 | export default function ProductTypeList() { 27 | async function ConfirmFunction(credit, userID, operation) { > 28 | return useFetch( 29 | "/credit/add?userId=" +

How can I fix it?

export default function ProductTypeList() {
  async function ConfirmFunction(credit, userID, operation) {
    return useFetch(
      "/credit/add?userId=" +
        userID +
        "&amount=" +
        credit +
        "&type=" +
        operation
    );
  }
    ...
return
<Button
 color="primary"
 onClick={() =>
    ConfirmFunction(selectedAmount, select, selectOperation)
    }
>
     Okay
</Button>

Note: All parameters are true.

Answer 1

It's the first rule of using react hooks

Only Call Hooks at the Top Level

https://reactjs.org/docs/hooks-rules.html

You need to move that to the top level of your component. If you need to use the state value addCredit you can either pass it in as an argument or if the function is defined within the component, you can use it in scope eg

const MyComponent = () => {
    const [addCredit, setAddCredit] = useState();

    async function ConfirmFunction(credit, userID, operation) {
        return whateverFetchClient.fetch(
            "/credit/add?userId=" + userID + "&amount=" + credit + "&type=" + operation );
    }
}