Converting string to unordered list - html-lists

Question

For a random experiment, I was trying to build a shopping list, using Stencil. My input would be a string, ie. "cauliflower, cucumber" with ingredients on the shopping list. I would like this string to be converted in an unordered list.
Converting the string to an array is no problem. Going from the array to the list, I tried using a for loop, looping through all options in the array and adding them to the list.
export class ShoppingList {
#Prop() veggies: string;
private makeList(typeString: string): HTMLUListElement {
var listArray: string[] = typeString.split(',');
for(var i=0; i<listArray.length; i++) {
// Create the list element:
var list = document.createElement('ul');
// Create the list item:
var item = document.createElement('li');
// Set its contents:
item.appendChild(document.createTextNode(listArray[i]));
// Add it to the list:
list.appendChild(item);
}
return list;
}
private getVeggies(): HTMLUListElement {
return this.makeList(this.veggies);
}
render() {
return (
<div>
veggies:
<ul>{this.getVeggies()}</ul>
</div>
);
}
}
The index.html file runs this code through the following line:
<shopping-list veggies="Cauliflower, cucumber" ></shopping-list>
I expected an output of veggies: * cauliflower \n *cucumber. Instead, I just get veggies: with an empty list. When inspecting the elements, I get the following HTML output:
<div>veggies:<ul><undefined></undefined> </ul><br></div>

Answer 1

You are mixing DOM nodes and VDOM nodes. With the VDOM you can remove the code manually creating DOM nodes:
export class ShoppingList {
#Prop() veggies: string;
private makeList(typeString: string): HTMLUListElement {
var listArray: string[] = typeString.split(',');
return (
<ul>
{listArray.map((item) => <li>{item}</li>)}
</ul>
);
private getVeggies(): HTMLUListElement {
return this.makeList(this.veggies);
}
render() {
return (
<div>
veggies:
{this.getVeggies()}
</div>
);
}
}
First of all, I changed makeList so it returns VDOM and loop over the items with map instead of a for loop. Also I removed the <ul> from the render() method since makeList already returns it.