title: Looping over a list to create elements
body: <p>This seems to be set up correct, but it clearly is not and I cannot see where it's going wrong. I'm trying to loop over a "list of objects" and create a <code>ul</code> with <code>li</code>s for each item in the list and put those inside of a <code>div</code>. Ignore everything involving the ID. I have a feeling I'm not entirely sure how <code>List.map</code> returns.</p>
  
  <pre><code>type alias Product =
    { a : String
    , b : String
    , c : Int
    , d : String
    , e : String
    }
  
  type alias Model =
    { id : String
    , products : List Product}
  
  view : Model -&gt; Html Msg
  view model =
    div []
      [ input [ type' "text", onInput UpdateText ] []
      , button [ type' "button", onClick GetProduct ] [ text "Search" ]
      , br [] []
      , code [] [ text (toString model.products) ]
      , div [] [ renderProducts model.products ]
      ]
  
  renderProduct product =
    let
      children =
        [ li [] [ text product.a ] 
        , li [] [ text product.b ] 
        , li [] [ text (toString product.c) ] 
        , li [] [ text product.d ] 
        , li [] [ text product.e ] ]
    in
      ul [] children
  
  renderProducts products =
    List.map renderProduct products
  </code></pre>
  
  <p>The error is as follows:</p>
  
  <pre><code>The 2nd argument to function `div` is causing a mismatch.
  
    78|       div [] [ renderProducts model.products ]
               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  Function `div` is expecting the 2nd argument to be:
  
    List (VirtualDom.Node a)
  
  But it is:
  
    List (List (Html a))
  </code></pre>