Question 350828 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Array.prototype.map() expects a value to be returned at the end of arrow function array-callback-return

{all_product.map((e)=>{
            if(cartItems[e.id]>0){
                return(
                <div>
                <div className="cartitems-format">
                    <img src={e.image} alt="" className='carticon-product-icon'/>
                    <p>{e.name}</p>
                    <p>${e.new_price}</p>
                    <button className='cartitems-quantity'>{cartItems[e.id]}</button>
                    <p>{e.new_price*cartItems[e.id]}</p>
                    <img src={remove_icon} onClick={()=>{removeFromCart()}} alt="" />
                </div>
            </div>
                )
            }
        })}

In the above it is showing the warning message and showing error in the webpage

Tags:

2

Answers


  1. 0

    The issue here is that when the if condition does not evaluate to true, your arrow function does not indeed return anything. Try to return something in an else case

     {all_product.map((e)=>{
        if(cartItems[e.id]>0){
            return(
            <div>
            <div className="cartitems-format">
                <img src={e.image} alt="" className='carticon-product-icon'/>
                <p>{e.name}</p>
                <p>${e.new_price}</p>
                <button className='cartitems-quantity'>{cartItems[e.id]}</button>
                <p>{e.new_price*cartItems[e.id]}</p>
                <img src={remove_icon} onClick={()=>{removeFromCart()}} alt="" />
            </div>
        </div>
            )
        }
        else{
         return(<></>)
        }
    })}
    Login or Signup to reply.
  2. 0

    Array.map expects to execute on each item of the array. From your code we can deduce execution on each item is conditional i.e based on the cart’s content. A better approach would be to use Array.reduce.

    {all_product.reduce((acc, e) => {
    if (cartItems[e.id] > 0) {
      acc.push(
        <div>
          <div className="cartitems-format">
            <img src={e.image} alt="" className='carticon-product-icon' />
            <p>{e.name}</p>
            <p>${e.new_price}</p>
            <button className='cartitems-quantity'>{cartItems[e.id]}</button>
            <p>{e.new_price * cartItems[e.id]}</p>
            <img src={remove_icon} onClick={() => { removeFromCart() }} alt="" />
          </div>
        </div>
      )
    }

    return acc;
  }, [])}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search