regarding Project 4: OOP Game Show App PDF > step 6

"Switch gears for a moment and head to the Phrase class inside the Phrase.js file. Inside the Phrase class, create a method called addPhraseToDisplay().

This method adds letter placeholders to the display when the game starts. Each letter is presented by an empty box, one list item for each letter. See the example_phrase_html.txt file for an example of what the render HTML for a phrase should look like when the game starts, including any id or class attributes needed. When the player correctly guesses a letter, the empty box is replaced with the matched letter (see the showMatchedLetter() method below).

Make sure the phrase displayed on the screen uses the letter CSS class for letters and the space CSS class for space."

I am using map and forEach. In my test.js file (just seeing if I can get it to work separately first) I managed to list the ENTIRE array on each list item. I have three items in my ARRAY and it created three list items. Here is the sample code I am referring to. I will work on getting this sample on github but for now I thought I'd post it here:

let listOfThings = ['q', 'a', 'b'];
const div = document.createElement('div');
div.setAttribute('id', 'phrase');
div.setAttribute('class', 'section');
let ul = document.createElement('ul');
let li = document.createElement('li');

let mylist = listOfThings.forEach(list => {
    let li = document.createElement('li');
    li.innerHTML = listOfThings.map(upperC => {
        upperC.slice;
        upperC.toUpperCase()

    });
    ul.appendChild(li);
})

ul.appendChild(li);
div.appendChild(ul);

document.body.appendChild(div);

console.log(li)
console.log(mylist)

My question: how can I map over an array so that each element in an array is treated as an individual list item (<li>)?