title: How to pass an action to a child component in Elm
body: <p>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. </p>
  
  <p>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. </p>
  
  <p>Parent Component:</p>
  
  <pre><code>type alias Model = List ToDoItem.Model
  
  type Action
    = Remove Int
  
  update : Action -&gt; Model -&gt; Model
  update action model =
    case action of
      Remove id -&gt;
        List.filter (\todo -&gt; todo.id /= id) model
  
  view : Signal.Address Action -&gt; Model -&gt; Html
  view address model =
    let
      buildToDos =
        List.map (ToDoItem.view address) model
    in
      div [] [ buildToDos ]
  </code></pre>
  
  <p>Child Component:</p>
  
  <pre><code>type alias Model =
    { id : Int
    , name : String
    , description : String
    , complete: Bool
    }
  
  type alias ID = Int
  
  type Action
    = Toggle Bool
  
  update : Action -&gt; Model -&gt; Model
  update action model =
    case action of
      Toggle toggle -&gt;
        if toggle == True then
            { model | complete = False }
        else
          { model | complete = True }
  
  view : Signal.Address Action -&gt; Model -&gt; Html
  view address model =
    let
      toggleText : Bool -&gt; String
      toggleText complete =
        case complete of
          True -&gt; "Incomplete"
          False -&gt; "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)]
      ]
  </code></pre>
  
  <p>Compiler Error:</p>
  
  <pre><code> -- TYPE MISMATCH ---------------------------------------------- 
  
  The type annotation for `view` does not match its definition.
  
  20│ view : Signal.Address Action -&gt; Model -&gt; Html
             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  The type annotation is saying:
  
      Address Action -&gt; List ToDoItem.Model -&gt; Html
  
  But I am inferring that the definition has this type:
  
      Address ToDoItem.Action -&gt; List ToDoItem.Model -&gt; 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)
  </code></pre>
  
  <p>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?</p>
  
  <p>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. </p>
  
  <p>Then again, maybe I'm way off because this is day 2 of my Elm life.</p>