Hooks can only be called inside of the body of a function component. Error: Invalid hook call-CodePudding

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,
        
    }
    
}

CodePudding user response：

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.