Question 266203 in Html Question posted in
Some basic documentation can be found here.

Html – Reduce function shows NaN or Undefined when used along with map() function in JSX

I am trying to get the total from objects (product, sellingPrice) that renders dynamically on the screen after they have been entered through a form. I am using the map() function to loop through the list of entered data and using the reduce() function to get the sum total and display them on the screen, I think I am having issues with the reduce function as it shows NaN and Undefined in the console: I will gladly appreciate your help, thanks. Here are the useStates.

const [productName, setProductName] = useState("");
const [sellingPrice, setSellingPrice] = useState(0);
const [newItems, setNewItems] = useState([])```
//Here is then code

const displayAddedItemList = () => {
    if (!visible) {
        return (
            <div>
                <div>Items</div>
                {newItems.map((items)=>{
                    const {productName,sellingPrice} = items;
                    return(
                        <>
                        <div className='itemsAdded'>
                            <div className='eachItemAdded'>  
                                <div>{productName}</div>
                                <div>{sellingPrice}</div>
                            </div>
                            <div className='deleteEditFont'> 
                                <FontAwesomeIcon icon={faTrashCan} />
                            </div>
                        </div>
                        </>
                        );
                    }).reduce(function(a,b) {
                        return 
                            <div className='totalItemsAdded'>
                                <p>Total</p>
                                <p>${a + b.sellingPrice}</p>
                            </div>;
                    }) 
                }
                </div>
            );
        }
    }
Tags:

2

Answers


  1. 0

    There is a small issue with the placement of the return statement within the reduce function.

    const displayAddedItemList = () => {
    if (!visible) {
        const totalSellingPrice = newItems.reduce((total, item) => total + item.sellingPrice, 0);

        return (
            <div>
                <div>Items</div>
                {newItems.map((item, index) => {
                    const { productName, sellingPrice } = item;
                    return (
                        <div className='itemsAdded' key={index}>
                            <div className='eachItemAdded'>
                                <div>{productName}</div>
                                <div>{sellingPrice}</div>
                            </div>
                            <div className='deleteEditFont'>
                                <FontAwesomeIcon icon={faTrashCan} />
                            </div>
                        </div>
                    );
                })}
                <div className='totalItemsAdded'>
                    <p>Total</p>
                    <p>${totalSellingPrice}</p>
                </div>
            </div>
        );
    }
}
    Login or Signup to reply.
  2. 0

    the problem is

    that the reduce function was placed inside the map function, which resulted in unexpected behavior. When you used return within the reduce function, it caused the map function to return undefined, and that’s why you were getting NaN or undefined.

    const displayAddedItemList = () => {
      return (
        <div>
          <div>Items</div>
          {visible &&
            newItems.map((item) => (
              <div key={item.productName} className='itemsAdded'>
                <div className='eachItemAdded'>
                  <div>{item.productName}</div>
                  <div>{item.sellingPrice}</div>
                </div>
                <div className='deleteEditFont'>
                  <FontAwesomeIcon icon={faTrashCan} />
                </div>
              </div>
            ))}
          {visible && (
            <div className='totalItemsAdded'>
              <p>Total</p>
              <p>${newItems.reduce((total, item) => total + item.sellingPrice, 0)}</p>
            </div>
          )}
        </div>
      );
    };
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search