Help with first complex template literal function

Tell us what’s happening:

Basically I’m lost. I have no idea how I’m supposed to list the array inside an array by using template literals inside a loop. I feel like it’s too many topics at once for me. I get an error for trying to just declare resultDisplayArray instead of giving it a value. After that, not sure how to fit in the loop properly. The hint on freecodecamp uses the map() function but the curriculum didn’t teach it yet.

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;
 for (let i = 0; i <= arr.length; i++) {
     console.log(`<li class="text-warning">${arr[i]}</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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36.

Challenge: Create Strings using Template Literals

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