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:

You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
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.

The error speaks itself, Hooks can only be called inside of the body of a function component. so move your ConfirmFunction inside ProductTypeList. — Nik
– Nik, Commented Jan 31, 2022 at 12:52
Don't name a function starting with use unless it's going to be at the Top Level. All functions starting with use will be treated as a hook. — Someone Special
– Someone Special, Commented Jan 31, 2022 at 12:58

possum · Accepted Answer · 2022-01-31 12:56:19Z

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 e.g.

const MyComponent = () => { const [addCredit, setAddCredit] = useState(); async function ConfirmFunction(credit, userID, operation) { return whateverFetchClient.fetch( "/credit/add?userId=" + userID + "&amount=" + credit + "&type=" + operation ); } }

I change it but did not work. I edited my question, can you look at it?
useFetch is still a hook, you need to move that one too or use a way to fetch it asynchronously like I had in my example

Collectives™ on Stack Overflow

How to solve Invalid hook call in ReactJS?

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related