cannot destructure property as it is undefined error

Question

Creating an onClick event to open a cart drawer and receiving the error 'Cannot restructure property 'shoppingCartOpen' of 'value' as it is undefined'. How do I resolve it?

const ButtonAppBar = ({value}) => {
  const { shoppingCartOpen } = value
  let shoppingCartDrawer;
  if (this.state.shoppingCartOpen) {
    shoppingCartDrawer = <ShoppingCartDrawer />;
  }

Answer 1

The error isn't in this code snippet you've posted, it's in how you're calling it. You're expecting value to be an object with the property shoppingCartOpen, so if value is undefined, then this line is a problem: const { shoppingCartOpen } = value.

You can default value to an empty object to supress errors

const ButtonAppBar = ({value = {}}) =>

But make sure that you are actually passing the right value to the props when you call it! It should look like:

<ButtonAppBar value={someObject} />