リストをループして要素を作成する

Question

これは正しく設定されているようですが、明らかにそうではなく、どこが間違っているのかわかりません。私は "オブジェクトのリスト"をループして、リスト内の各項目に対してとulを作成し、それらをdivの中に入れようとしています。 IDを含むすべてを無視します。 List.mapがどのように返ってきたのか完全にはわからない気がします。次のように

type alias Product = 
    { a : String 
    , b : String 
    , c : Int 
    , d : String 
    , e : String 
    } 

type alias Model = 
    { id : String 
    , products : List Product} 

view : Model -> 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 

エラーがある：

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)) 

Answer 1

renderProductsは、要素のリストを返します。 divの2番目のパラメータは要素のリストを取ります。 2番目のパラメータを角カッコで囲むことで、単一の要素リストを含むリストを作成しています。

div [] (renderProducts model.products)