Why am I receiving 'Invalid hook call' error? - reactjs

Question

I am dispatching a redux action on a button click. When the button is clicked I then receive the error 'Invalid hook call. Hooks can only be called inside of the body of a function component.' I can have this same action be dispatched on the page render and it works fine. I have other actions being dispatched onClick but this one isn't working.
This is the action
import axios from "axios";
export const addReview = (productInfo) => async (dispatch) => {
try {
await axios({
method: "post",
url: url,
header: { "Content-Type": "application/json" },
data: {
name: productInfo.name,
rating: productInfo.rating,
description: productInfo.description,
buyAgain: productInfo.buyAgain,
productId: productInfo.productId,
},
}).then((response) => {
dispatch({
type: "PRODUCTS_SUCCESS",
payload: response.data,
});
});
} catch (error) {
dispatch({
type: "PRODUCTS_FAILURE",
payload: error,
});
}
};
And here is the action dispatch on onClick event
const submitReview = () => {
let productInfo = {
name,
rating: starRate,
description: message,
buyAgain,
productId: currentProduct,
};
dispatch(addReview(productInfo));
};
Here is the entire component
import React, { useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import "./ProductReview.css";
import { ImStarEmpty } from "react-icons/im";
import { ImStarFull } from "react-icons/im";
import { IoPersonCircle } from "react-icons/io5";
import { addReview } from "../../actions/addReview";
export const ProductReview = () => {
const [starRate, setStarRate] = useState();
const [message, setMessage] = useState();
const [buyAgain, setBuyAgain] = useState(true);
const [missingRating, setMissingRating] = useState(false);
const dispatch = useDispatch();
const fName = localStorage.getItem("firstName");
const currentProduct = useSelector(
(state) => state.userInfoReducer.currentProductReview
);
const allProducts = useSelector((state) => state.productReducer.data);
let productToDisplay;
let title;
let name;
allProducts.map((product) => {
if (product._id === currentProduct) {
productToDisplay = product;
if (product.title.length > 60) {
title = product.title.substring(0, 60) + "...";
}
}
return productToDisplay;
});
const submitReview = () => {
let productInfo = {
name,
rating: starRate,
description: message,
buyAgain,
productId: currentProduct,
};
dispatch(addReview(productInfo));
};
return (
<>
<div className="product-review-container">
<h1 className="product-review-title">Create Review</h1>
<div className="product-review-product">
<img
className="review-product-img"
src={productToDisplay.image}
alt="product"
/>
<h2 className="review-product-title">{title}</h2>
</div>
<hr className="line-break" />
<div className="review-product-review">
<div className="review-product-review-container">
<h2 className="review-product-review-title">Overall Rating</h2>
<p className="review-product-review-stars">
{starRate >= 1 ? (
<ImStarFull
className="star-full"
onClick={() => setStarRate(1)}
/>
) : (
<ImStarEmpty
className="star-empty"
onClick={() => setStarRate(1)}
/>
)}
{starRate >= 2 ? (
<ImStarFull
className="star-full"
onClick={() => setStarRate(2)}
/>
) : (
<ImStarEmpty
className="star-empty"
onClick={() => setStarRate(2)}
/>
)}
{starRate >= 3 ? (
<ImStarFull
className="star-full"
onClick={() => setStarRate(3)}
/>
) : (
<ImStarEmpty
className="star-empty"
onClick={() => setStarRate(3)}
/>
)}
{starRate >= 4 ? (
<ImStarFull
className="star-full"
onClick={() => setStarRate(4)}
/>
) : (
<ImStarEmpty
className="star-empty"
onClick={() => setStarRate(4)}
/>
)}
{starRate >= 5 ? (
<ImStarFull
className="star-full"
onClick={() => setStarRate(5)}
/>
) : (
<ImStarEmpty
className="star-empty"
onClick={() => setStarRate(5)}
/>
)}
</p>
{missingRating ? (
<p className="missing-rating">! Must choose a rating</p>
) : (
""
)}
</div>
<button
className="review-product-review-clear"
onClick={() => setStarRate(0)}
>
Clear
</button>
</div>
<div className="review-product-buy-again">
<h2 className="review-product-buy-again-title">
Would you buy this item again?
</h2>
<div className="btn-group btn-group-toggle" data-toggle="buttons">
<label className="btn btn-secondary active">
<input
type="radio"
name="options"
id="option1"
autoComplete="off"
onClick={() => setBuyAgain(true)}
/>{" "}
Yes
</label>
<label className="btn btn-secondary">
<input
type="radio"
name="options"
id="option2"
autoComplete="off"
onClick={() => setBuyAgain(false)}
/>{" "}
No
</label>
</div>
</div>
<hr className="line-break" />
<div className="review-product-message">
<h2 className="review-product-message-title">
Add a written message
</h2>
<input
type="text"
className="form-control review-product-message-input"
placeholder="What did you like or dislike?"
onChange={(e) => setMessage(e.target.value)}
/>
<h2 className="review-product-name-title">Choose your public name</h2>
<p className="review-product-appear">
This is how you'll appear to other customers
</p>
<div className="review-product-user-info">
<IoPersonCircle className="review-product-profile" />
<input
type="text"
className="form-control review-product-profile-name"
defaultValue={fName}
onChange={(e) => (name = e.target.value)}
/>
</div>
<hr className="line-break" />
<button
className="review-product-submit"
onClick={() => submitReview()}
>
Submit
</button>
{missingRating ? (
<p className="missing-rating">Missing information</p>
) : (
""
)}
</div>
</div>
</>
);
};

Answer 1

Out of sync versions of React and React DOM
You can run npm ls react-dom in your react projet and if the version is less then 16.8.0 it does not yet support Hooks
2- Do not call Hooks in event handlers.

Answer 2

Your hooks must always be at the top of your functional Component. You may be able to resolve this by simply moving down the initialization of ‘fName’ below your hooks.