No-unused-expressions issue React - reactjs

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