Javascript 'Callback' function not working with map function

Question

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?

// 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>`;
}

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

11,517
3
23
44

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