Create Strings using Template Literals(HELP)

Tell us what’s happening:

I understood the explanation for this challenge where map() was not used but this current solution including map is confusing me.

Your code so far


const result = {
  success: ["max-length", "no-amd", "prefer-arrow-functions"],
  failure: ["no-var", "var-on-top", "linebreak"],
  skipped: ["id-blacklist", "no-dup-keys"]
};
function makeList(arr) {
  "use strict";

  // change code below this line
  const resultDisplayArray = arr.map(item => `<li class="text-warning">${item}</li>`);
  // change code above this line

  return resultDisplayArray;
}
/**
 * makeList(result.failure) should return:
 * [ `<li class="text-warning">no-var</li>`,
 *   `<li class="text-warning">var-on-top</li>`, 
 *   `<li class="text-warning">linebreak</li>` ]
 **/
const resultDisplayArray = makeList(result.failure);

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/es6/create-strings-using-template-literals

What part of the use of the map method are you having trouble understanding as it pertains to the code you posted?

  • when makeList(result.failure) is called, result.failure is passed as an array
    arr becomes ["no-var, "var-on-top", "linebreak"] within the makeList() function
  • the map() method is used on arr to insert each individual element from arr to resultDisplayArray to incude the requirements in the challenge & that is to attach some text around each of these elements & insert them into the new array resultDisplayArray using ES6’s template literal – in our case here backtiks & the string literal ${item}
  • for example when arr[0] maps onto resultDisplayArray[0], "no-var" is extracted from arr[0] & inserted into resultDisplayArray[0] wrapped around the text as per requirement
  • in the end resultDisplayArray contains each element from arr including the text wrapped around it & becomes something like this:
    [ <li .. "no-var" .. /li>, <li .. "var-on-top" .. li>, <li .. "linebreak" ..li>]