ES6 - Create Strings using Template Literals

Tell us what’s happening:
Describe your issue in detail here.
Hello everyone. Could you please help to figure out why I can’t use the forEach method?
Code is below, thanks in advance for your time and help

const result = {
  success: ["max-length", "no-amd", "prefer-arrow-functions"],
  failure: ["no-var", "var-on-top", "linebreak"],
  skipped: ["no-extra-semi", "no-dup-keys"]
};
function makeList(arr) {
  // Only change code below this line
  const failureItems = arr.forEach((num) => {
    return `<li class="text-warning">${num}</li>`
  });
  // Only change code above this line

  return failureItems;
}

const failuresList = makeList(result.failure);``
  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

Challenge: ES6 - Create Strings using Template Literals

Link to the challenge:

The forEach method does not return a new array. Try using a method you have already learned which does return a new array (like the map method).

1 Like

Hello @RandellDawson . Thanks for the reply. In the task, there is no requirement, which method should be used. Below is the task. It isn’t clear to me why I can’t use forEach here? How does it work in this task. I used map method and solved it. However it is still not clear.

Use template literal syntax with backticks to create an array of list element (li) strings. Each list element’s text should be one of the array elements from the failure property on the result object and have a class attribute with the value text-warning. The makeList function should return the array of list item strings.

Use an iterator method (any kind of loop) to get the desired output (shown below).

The forEach method returns undefined

Add this console.log to your code to see what you are returning

const result = {
  success: ["max-length", "no-amd", "prefer-arrow-functions"],
  failure: ["no-var", "var-on-top", "linebreak"],
  skipped: ["no-extra-semi", "no-dup-keys"]
};
function makeList(arr) {
  // Only change code below this line
  const failureItems = arr.forEach((num) => {
    return `<li class="text-warning">${num}</li>`
  });
  console.log(failureItems)
  // Only change code above this line

  return failureItems;
}

const failuresList = makeList(result.failure);

The key is to use a method that will get you the desired result.

As mentioned earlier, map returns a new array which is why it works here.

If you really wanted to use the forEach method, you will have to make some changes to create a new array and push to that array.

const result = {
  success: ["max-length", "no-amd", "prefer-arrow-functions"],
  failure: ["no-var", "var-on-top", "linebreak"],
  skipped: ["no-extra-semi", "no-dup-keys"]
};
function makeList(arr) {
  let failureItems = []
  // Only change code below this line
  arr.forEach((num) => {
    failureItems.push(`<li class="text-warning">${num}</li>`)
  });

  // Only change code above this line

  return failureItems;
}

const failuresList = makeList(result.failure);
1 Like

@jwilkins.oboe thanks a lot for help!