1

Given a List of String , I want to create a List of HTML div in order to inject it in view : I wondered that the function signature should be as following : 

display : List String ->  List Html div

and the function body :

    display model = case model of
     [] -> []
     (x::xs) -> div [][ text x] :: display xs

when embeding the above function in the view as per the below (as i know the div function take a List of Html as second argument div : List Attribute -> List Html -> Html)

view : Model -> Html Msg
   view model = div []
                  [
                    input [ placeholder "write your post here" , onInput  Change][]
                    , button [onClick Save ][text "save"]
                    ,div [][ display model.lst ]

I am getting the below error when compiling :

  The 2nd argument to function `div` is causing a mismatch.

24|                      div [][ display model.lst ]
                               ^^^^^^^^^^^^^^^^^^^^^
Function `div` is expecting the 2nd argument to be:

    List (VirtualDom.Node a)

But it is:

    List (List (Html a))

how could I sort this out , THANKS

khaled alomar
  • 673
  • 4
  • 25

1 Answers1

7

The error message about the line div [][ display model.lst ] states that you are trying to embed a list within a list. Since the return value of display is already a list, you don't need to wrap it in brackets. Try this instead:

div [] (display model.lst)

You'll then see that there is a problem with the type annotation for display. You are missing some parentheses, because List only takes a single type argument. It should be: 

display : List String ->  List (Html div)

And as a side note, in that signature for display, you have Html div. That div doesn't mean it's returning an actual div. A lowercase label in a type annotation basically means that anything can go there. You'll often see people use short-hand type labels for that, like Html a, since entering div there can be confusing. Another alternative is being consistent with the rest of the view code and using Html Msg. Either way, in this particular circumstance, is fine; it's just a matter of convention.

Chad Gilbert
  • 36,115
  • 4
  • 89
  • 97
  • thank you for your information , I find this " A lowercase label in a type annotation basically means that anything can go there" a bit confusing, could elaborate please – khaled alomar Jun 15 '16 at 09:36
  • 1
    Upper and Lowercase values in Elm are significant in a few ways. Take a look at the [Reading Types](http://guide.elm-lang.org/types/reading_types.html) section of the guide. – Chad Gilbert Jun 15 '16 at 09:47