What am I doing wrong: ES6: Create Strings using Template Literals

@DanCouper and all you experts lurking here,

Please help me understand why this code is not working.

the challenge is:

Use template literal syntax with backticks to display each entry of the result object’s failure array. Each entry should be wrapped inside an li element with the class attribute text-warning , and listed within the resultDisplayArray .

Here is my 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 = `${

//used .map() to iterate thru the array and put each failure entry into the li element
arr.map(arr => "<li class='text-warning'>" 
  + arr + "</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);


console.log(resultDisplayArray);

the code does work when I test it on repl.it .i.e the code above does put each entry within the li element!!
here is a screenshot:
Capture|690x367

but when I run it here it gives me this error:

// running tests
resultDisplayArray is a list containing result failure messages.
makeList(...).every is not a function
// tests completed

Please let me know what I am doing wrong

I believe the result it is looking for is an array of strings; right now your map is inside of the template literal wrapper, which will result in it returning a string of the array.

Inside of your map function, is there anywhere you think a template literal could be used?

Hint: the syntax for string literals is

const varName = "cruel";
const str = `hello ${varName} world`
console.log(str) //returns hello cruel world

instead of

const varName = "cruel";
const str = "hello " + varName + " world"

You only put the javascript variables in the ${} and the rest of the string you can type normally

e.g.

let templateLiteralString = `The users name is ${user.name} and they are from ${user.location}`

thanks guys @Lucasl, @camelcamper

so here is the revised code

//used .map() to iterate thru the array and return an array of string within the li element with 'text-warning' class.

const resultDisplayArray = arr.map(arr => "<li class='text-warning'>" + `${arr}` + "</li>");

/**
 * 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>` ]
 **/

how do it come out to this?? all this destructuring is so confusing