I'm trying to implement a shopping cart in my app. I created another file that has the functions I want to be called I keep getting an invalid hook call.
export function CartProvider(props) {
const [items, setItems] = useState([]);
function addItemToCart() {
console.log("test")
}
return (
<CartContext.Provider
value={{items, setItems, getItemsCount, addItemToCart, getTotalPrice}}>
{props.children}
</CartContext.Provider>
);
}
There is more code in the file but I've narrowed the issue down to this, but as soon as I import the CartContext and make it a const I get the issue.
import {CartContext} from '../CartContext'
const {addItemToCart} = useContext(CartContext)
export default class ProductCard extends Component {
constructor(props) {
super(props)
this.state = {
name: this.props.postname,
price: this.props.postprice,
image: this.props.postimage,
description: this.props.postDescription,
quantity: this.props.postquantity,
}
}
You can use hooks only inside of function components. Therefore you can't use useContext(CartContext) just like that outside of any function component.
I assume that you want to use the context inside of ProductCard? Then you have to either rewrite it to a function component:
function ProductCard (props){
const {addItemToCart} = useContext(CartContext)
return ...
}
or wire your class component to the context.
Read more about both ways here