Context API not displaying array of data

Question

I'm receiving the error 'expected an assignment of function call and instead saw an expression.

*The above error is resolved, it's now giving me an Unhandled Rejection (TypeError): render is not a function. It functions properly until I go to the products page and then gives me the error.

I console logged it and it was pulling the information but then it breaks when I import the ProductBrowse component to display the information.

ProductPage:

class ProductPage extends React.Component {
  state = {
    shoppingCartOpen: false,
  };
  drawerToggleClickHandler = () => {
    this.setState((prevState) => {
      return { shoppingCartOpen: !prevState.shoppingCartOpen };
    });
  };

  render() {
    let shoppingCartDrawer;
    if (this.state.shoppingCartOpen) {
      shoppingCartDrawer = <ShoppingCartDrawer />;
    }
    return (
      <ProductStyling>
        <ButtonAppBar drawerClickHandler={this.drawerToggleClickHandler} />
        <H1>Products</H1>
        {shoppingCartDrawer}
        <ProductConsumer>
          <Grid container spacing={3}>
            {(value) => {
              return value.products.map((prod, idx) => {
                return (
                  <Grid item xs={3} key={`${prod.name}-${prod.store}-${idx}`}>
                    <ProductBrowse
                      productName={prod.name}
                      productDesc={prod.desc}
                      productImg={prod.img}
                      productPrice={prod.price}
                    />
                  </Grid>
                );
              });
            }}
          </Grid>
        </ProductConsumer>
        ;
      </ProductStyling>
    );
  }
}

Structure of value:

const ProductContext = React.createContext();

class ProductProvider extends React.Component {
state = {
products: productData, 
};

addToCart = () => {
console.log('Hello from add to cart'); };

render() {
return (
  <ProductContext.Provider
    value={{ ...this.state, addToCart: this.addToCart }}
  >
    {this.props.children}
  </ProductContext.Provider>
); 
}
}

const ProductConsumer = ProductContext.Consumer;

export { ProductProvider, ProductConsumer };

ProductBrowse:

const ProductBrowse = ({
      productName,
      productDesc,
      productImg,
      productPrice,
    }) => {
      const classes = useStyles();
      const [open, setOpen] = React.useState(false);
    
      const openModal = () => {
        setOpen(!open);
      };
    
      const closeModal = () => {
        setOpen(!open);
      };
    
      return (
        <Box border={1} borderRadius={3}>
          <Card className={classes.root}>
            <CardActionArea onClick={() => openModal()}>
              <ProductModal
                open={open}
                onClick={() => openModal()}
                onClose={() => closeModal()}
                onSave={() => closeModal()}
                productName={productName}
                productDesc={productDesc}
              />
              <CardHeader
                title={productName}
                subheader={formatCurrency(productPrice)}
              />
              <CardMedia
                className={classes.media}
                image={productImg}
                alt={productDesc}
              />
              <CardContent>
                <Typography variant='body2' color='textSecondary' component='p'>
                  {productDesc}
                </Typography>
              </CardContent>
            </CardActionArea>
            <CardActions>
              <Button size='small' /*To Checkout*/>BUY NOW</Button>
              <Button size='small'>ADD TO CART</Button>
              <Button size='small'>REVIEW</Button>
            </CardActions>
          </Card>
        </Box>
      );
    };

ProductData:

import desk from '../../../assets/img/desk.webp'; 

export const productData = [
    {
      img: desk,
      name:  'Desk',
      store: 'Local Furniture Shop 1',
      price: 9.99, 
      desc: "This sturdy desk is built to outlast years of coffee and hard work. You get a generous work surface and a clever solution to keep cords in place underneath." 
    },

Index.js:

ReactDOM.render(
  <React.StrictMode>
    <Auth0Provider
      domain={auth0Domain}
      client_id={auth0ClientID}
      redirect_uri={window.location.origin}
      onRedirectCallback={onRedirectCallback}
      audience={auth0Audience}
      scope={"read:current_user"}
    >
      <ProductProvider>
      <Provider store={store}>
        <App />
      </Provider>
      </ProductProvider>
    </Auth0Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

Answer 1

You are not returning anything from ProductConsumer You need to do like this:

<ProductConsumer>
  <Grid container spacing={3}>
    {(value) => {
      return value.products.map((prod, idx) => {
        return (
          <Grid item xs={3} key={`${prod.name}-${prod.store}-${idx}`}>
            <ProductBrowse
              productName={prod.name}
              productDesc={prod.desc}
              productImg={prod.img}
              productPrice={prod.price}
            />
          </Grid>
        );
      });
    }}
  </Grid>
</ProductConsumer>;