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:
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.
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 );
}
}