No-unused-expressions issue React

Question

I am making an eCommerce website with React. There is a ProductList.js which is listing the code of Product.js . I am using the context API which is created from context.js . The code of context.js is-

    state = {
    products: [],
    detailProduct,
   };
   getItem = (id) => {
     let product = this.state.products.find((item) => item.id === id);
     return product;
   };
    
   handleDetail = (id) => {
     let product = this.getItem(id);
     this.setState(() => {
       return { detailProduct: product };
     });
   };
    
   addToCart = (id) => {
     console.log(`Hello from Add to Cart. Id is: ${id}`);
   };
   render() {
     return (
      <ProductContext.Provider
         value={{
           ...this.state,
           handleDetail: this.handleDetail,
           addToCart: this.addToCart
         }}
      >
        {this.props.children}
      </ProductContext.Provider>
     );
   }

This is not the full code for sure. If you need full code, I can give that too.

Code of Product.js is-

<ProductConsumer>
        {(value) => {
          <div className="p-5 img-container" onClick={() => value.handleDetail(id)}>
            <Link to="/details">
              <img src={img} className="card-img-top" alt="Product Image" />
            </Link>
            <button className={inCart ? "in-cart cart-btn" : "cart-btn"} disabled={inCart ? true : false} onClick={() => value.addToCart(id)}>
              {inCart ? (
                <p className="text-capitalize mb-0" disabled>
                  Already in cart
                </p>
              ) : (
                <i className="fas fa-cart-plus"></i>
              )}
            </button>
          </div>
        }}
      </ProductConsumer>

The error I am getting--

./src/components/Product.jsx
  Line 13:15:  Expected an assignment or function call and instead saw an expression  no-unused-expressions

Search for the keywords to learn more about each error.

Please help me in fixing this issue...

Answer 1

You are using curly braces { in the consumer block. Change these to parentheses like so:

<ProductConsumer>
        {(value) => (
          <div className="p-5 img-container" onClick={() => value.handleDetail(id)}>
            <Link to="/details">
              <img src={img} className="card-img-top" alt="Product Image" />
            </Link>
            <button className={inCart ? "in-cart cart-btn" : "cart-btn"} disabled={inCart ? true : false} onClick={() => value.addToCart(id)}>
              {inCart ? (
                <p className="text-capitalize mb-0" disabled>
                  Already in cart
                </p>
              ) : (
                <i className="fas fa-cart-plus"></i>
              )}
            </button>
          </div>
        )}
      </ProductConsumer>

Read this answer for an explanation: https://stackoverflow.com/a/35440330/1790728