How to pass an action to a child component in Elm - elm

Question

I've only been trying out Elm for a few days and have come across what seems like a common scenario that I can't figure out.
I have a parent component that holds a list of items. To render the list, I have a child component such that the parent calls the view function of the child passing in the address and model. Since the Action types are different, I think the compiler is complaining about that, but I'm really not sure.
Parent Component:
type alias Model = List ToDoItem.Model
type Action
= Remove Int
update : Action -> Model -> Model
update action model =
case action of
Remove id ->
List.filter (\todo -> todo.id /= id) model
view : Signal.Address Action -> Model -> Html
view address model =
let
buildToDos =
List.map (ToDoItem.view address) model
in
div [] [ buildToDos ]
Child Component:
type alias Model =
{ id : Int
, name : String
, description : String
, complete: Bool
}
type alias ID = Int
type Action
= Toggle Bool
update : Action -> Model -> Model
update action model =
case action of
Toggle toggle ->
if toggle == True then
{ model | complete = False }
else
{ model | complete = True }
view : Signal.Address Action -> Model -> Html
view address model =
let
toggleText : Bool -> String
toggleText complete =
case complete of
True -> "Incomplete"
False -> "Complete"
in
div
[ class "wrapper" ]
[ span [] [ text ("[" ++ toString model.id ++ "]") ]
, span [ class "name" ] [ text model.name ]
, div [ class "description" ] [ text model.description ]
, a [ onClick address (Toggle model.complete)] [ text (toggleText model.complete)]
]
Compiler Error:
-- TYPE MISMATCH ----------------------------------------------
The type annotation for `view` does not match its definition.
20│ view : Signal.Address Action -> Model -> Html
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
The type annotation is saying:
Address Action -> List ToDoItem.Model -> Html
But I am inferring that the definition has this type:
Address ToDoItem.Action -> List ToDoItem.Model -> Html
-- TYPE MISMATCH ----------------------------------------------
The 2nd argument to function `div` is causing a mismatch.
26│ div [] [ buildToDos ]
^^^^^^^^^^^^^^
Function `div` is expecting the 2nd argument to be:
List VirtualDom.Node
But it is:
List (List Html)
How do I declare either the child component's view function correctly or pass in the parameters to the child's view function correctly from the parent?
In reality, I don't actually want to pass any action to the child component - I just want to render it. The action in the child component is for the onClick there.
Then again, maybe I'm way off because this is day 2 of my Elm life.

Answer 1

Elm Architecture Tutorial covers the child view issue. Take another look at how the example 4 is implemented.
In short, you need to have an Action in the parent that wraps the child action:
type Action = Remove Int | ToDo Int ToDoItem.Action
And you need to forward this action to the appropriate Item in update.
In view you need to create a forwarding address for each of your ToDoItem views.
view : Signal.Address Action -> Model -> Html
view address model =
let
fwd idx = Signal.forwardTo address (ToDo idx)
toDoList =
List.indexedMap (\(idx, m) -> ToDoItem.view (fwd idx) m) model
in
div [] toDoList
Please note that your old buildToDos is already a list and saying [buildToDos] is actually saying List (List Html) which is why you got the second error.

Answer 2

The compiler had already told you the answer. First of all, the
Address Action -> List ToDoItem.Model -> Html
The Action here has to be specified to the children Action. Just fix it like the compiler tell you:
view : Signal.Address TodoItem.Action -> Model -> Html
Second one, because you buildToDos is already a list, you just need to:
div [] buildToDos
Spend some time understanding type annotation and follow compiler carefully then you are should be able to solve this kind of problem yourself.