Javascript 'Callback' function not working with map function

Question

    // map func to loop the list
    const allExpesneHTML= allExpenses.map(expense =>{ createListItem(expense) });

    //  join func to join strings and remove comma
    const joinedAllExpenseHTML = allExpesneHTML.join("");
    // console.log(allExpesneHTML);

    expenseTableEl.innerHTML= joinedAllExpenseHTML;
      
// //Listen to click event
element.addEventListener("click",addExpenseToTotal,false);

// view layer
function createListItem({ desc, amount }){
    return`
        <li class="list-group-item d-flex justify-content-between">
                    <div class="d-flex flex-column">
                    ${desc}
                    <small class="text-muted">March 11, 2021</small>
                    </div>
                
                    <span class="px-5">
                    ${amount}
                    </span>
                    <button type="button" class="btn btn-outline-danger btn-sm">
                    <i class="fas fa-minus-circle"></i>
                    </button>
                    </div>
        </li>
          ` ;
}

Callback function createListItem() is not working when I use it in map function. When I execute without the function its working as expected. Is there any thing I might have missed out?

You are not returing anything from `map` callback. Either 1) add return: `.map( expense =>{ return createListItem(expense) })` 2) Or remove the brackets for implicit return: `.map( expense => createListItem(expense) ) ` 3) Or simply `.map(createListItem)` — adiga, Apr 07 '21 at 06:50

score 0 · Accepted Answer · answered Apr 07 '21 at 06:49

0

You're not returning the result of createListItem in the callback passed to map.

allExpenses.map(expense => createListItem(expense))

or just

allExpenses.map(createListItem)

answered Apr 07 '21 at 06:49

Arun Kumar Mohan

10,613
3
18
40

score 0 · Answer 2 · answered Apr 07 '21 at 06:49

You are not returning your value from the map function

You need to use it like below with explicit return statement

const allExpesneHTML= allExpenses.map(expense =>{ 
   return createListItem(expense) 
});

or use an implicit return

const allExpesneHTML= allExpenses.map(expense => createListItem(expense));

Javascript 'Callback' function not working with map function

2 Answers2