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

Question

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 cant use `useContext(CartContext)` just like that outside of any function component. — henk, Mar 30 '22 at 16:59
Does this answer your question? [Invalid hook call. Hooks can only be called inside of the body of a function component](https://stackoverflow.com/questions/56663785/invalid-hook-call-hooks-can-only-be-called-inside-of-the-body-of-a-function-com) — Emile Bergeron, Mar 30 '22 at 17:10

score 1 · Accepted Answer · answered Mar 30 '22 at 17:05

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.

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

1 Answers1