How would produce a list of (Html msg) from a List String

-- I have List String
["Hello", "Goodbye", "???????"]

I would like to convert this into a Html msg.
This is because I want to use the li function, which takes a List (Html msg).

How would I get a List (Html msg) from List String that I can use as text.

Hello and welcome to Elm! :grinning:

For questions like this it would be great if you could provide what you have tried so far. Did you get anywhere? What were errors you encountered?

That way answers you will get don’t just give you a finished solution. Instead we can help you improve your code and eg. explain what was missing for you to get it working on your own.

Basically I am making a program that stores a checklist as a node tree and each node has a text and an array of child nodes.

I have a function that takes the children of a node and collects a list of strings.

I want to display it as a List (Html msg) to use in li.

Hopefully that gives you a rundown of what I am trying to do.

The basic way to create a HTML msg list from a HTML a list is with List.map.

You mentioned that you want to take those into li (I assume you want one li per string here) so (having the lis inside a ul) you’ll generally see something like


itemToLi : MyItemType -> HTML msg
itemToli item =
    H.li [] [ .... ]

...
   H.ul [] (items |> List.map itemToLi)

in your case this will work as you items are String


itemToLi : String -> HTML msg
itemToli item =
    H.li [] [ H.text item ]

...
   H.ul [] (items |> List.map itemToLi)

please note that this will say itemToLi is a function from your item-type to any msg - which can be ok and indicates that this function works in a very broad sense.

But usually you’ll want your concrete Msg type and it can be puzzling to see Msg vs msg in the errors.

So I’d suggest using

itemToLi : String -> HTML Msg
itemToli item =
    H.li [] [ H.text item ]

until you know why and that you’ll rather have msg there.

1 Like

I am a little bit confused seeing this.
Please explain to me the :: operator
and the use of H. Which I seriously don’t get.

Edit: Now that I think about it, I don’t know how I’m going to represent a variable size node tree.

my bad - too much Haskell the last few days (in Haskell it’s :: instead of :) - one moment I fix it

You might see H.li, H.text, … quite often because many of us don’t like to import a lot of functions from an module and instead use qualified imports:

import Html as H exposing (HTML)

...

H.div [] [...]

same with import Html.Events as Ev and import Html.Attributes as Attr (the alias H, Ev and Attris probably different for different people - I like it that way

exposing (HTML) because H.HTML looks ugly

One more thing. What is the difference between:

Html Msg

and

Html msg

Msg (uppercase) refers to the Msg’s your app has… you probably have something like:
type Msg
= Buttonpressed
| SomeOtherMsg

So when your type says it returns HTML Msg it can have buttons that triggers these messages.

If your view function returns HTML msg that is the same as Html someLowercasename, Html x, Html whatever…
It is just a type variable, can be any msg type.

Also you do not need to use Msg as the name of your type for messages… it is just convention.

type Actions
= ButtonPressed
|. Xxx

And using HTML Actions will work just fine…

1 Like

Thank you for clarifying