# I cannot render a basic input, complains about type mismatch

**URL:** <https://discourse.elm-lang.org/t/i-cannot-render-a-basic-input-complains-about-type-mismatch/8057>\
**Category:** Learn\
**Created:** [January 8, 2022, 9:49am UTC](https://discourse.elm-lang.org/t/i-cannot-render-a-basic-input-complains-about-type-mismatch/8057 "2022-01-08T09:49:41Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![ines.uslu](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/ines.uslu/32/4426_2.png) [@ines.uslu](https://discourse.elm-lang.org/u/ines.uslu)\
**Post date:** [January 8, 2022, 9:49am UTC](https://discourse.elm-lang.org/t/i-cannot-render-a-basic-input-complains-about-type-mismatch/8057/1 "2022-01-08T09:49:41Z")

</div>

I’m learning Elm for a side project. I am attempting to show a very simple input box that allows for a new list item to be created with that value but alas I’m getting an error I cannot understand. The symptoms occur around `PostIssue` and the view that triggers it.

### Msg type

```elm
type Msg = NewIssue
         | CancelNewIssue
         | PostIssue String

```

### Update function

```elm
update : Msg -> Model -> Model
update msg model =
  case msg of
    NewIssue ->
      { model | newIssue = True }

    CancelNewIssue ->
      { model | newIssue = False }

    PostIssue content ->
      let issue = { id = 1 + List.length model.issues |> Debug.toString
                  , subject = content
                  , parent = Nothing
                  }
      in
      { model | issues = model.issues ++ [issue], newIssue = False }

```

### Error

```elm
-- TYPE MISMATCH --------------------- /home/jose/workspace/rednast/src/Main.elm

The 3rd element of this list does not match all the previous elements:

43| [
44| h1 [] [text("Project: " ++ model.projectId)]
45| , div [] (List.map viewIssue model.issues)
46|> , input [onBlur PostIssue] []
47| ]

This `input` call produces:

    Html (String -> Msg)

But all the previous elements in the list are:

    Html Msg

Hint: Everything in a list must be the same type of value. This way, we never
run into unexpected values partway through a List.map, List.foldl, etc. Read
<https://elm-lang.org/0.19.1/custom-types> to learn how to “mix” types.

```

---

<div class="post-metadata">

**Author:** ![samjk](https://avatars.discourse-cdn.com/v4/letter/s/4491bb/32.png) [@samjk](https://discourse.elm-lang.org/u/samjk)\
**Post date:** [February 10, 2022, 5:22pm UTC](https://discourse.elm-lang.org/t/i-cannot-render-a-basic-input-complains-about-type-mismatch/8057/2 "2022-02-10T17:22:50Z")

</div>

The short answer: The `onBlur` function needs just a `Msg` (ie a Msg constructor that takes no arguments) rather than `String -> Msg` like your `PostIssue` constructor which needs a string in order to become a real `Msg`.

The long answer: `onBlur` does not have access to the value in the input field, so it’s not the way to access what the user has typed in. To get the current value in the input field you’ll want to use `onInput` (defined in [Html.Events](https://package.elm-lang.org/packages/elm/html/latest/Html-Events) and store the value in your Model (in something like a `currentIssue` record field). You need to store the value after each input event (ie keystroke) since the view function needs to know what to render - if the input after each keystroke is not stored in your model, any new input in the field won’t be rendered. The [example in the Elm Guide](https://guide.elm-lang.org/architecture/text_fields.html) shows you how to set up a basic text input.

If you want to treat the blur event as a sort of submit action, you should create a separate `Msg` constructor that takes no input for use with `onBlur`. Then in your update function, when that message is received it can look up the stored value in your model for the current input and add it to the list of issues (or otherwise handle it as desired).

---

<div class="post-metadata">

**Author:** ![ines.uslu](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/ines.uslu/32/4426_2.png) [@ines.uslu](https://discourse.elm-lang.org/u/ines.uslu)\
**Post date:** [February 10, 2022, 5:37pm UTC](https://discourse.elm-lang.org/t/i-cannot-render-a-basic-input-complains-about-type-mismatch/8057/3 "2022-02-10T17:37:12Z")

</div>

Thanks, @samjk. I did end up using your suggestion earlier. I learned quickly that `onBlur` does not get ahold of the input’s text and I’d have to store it somewhere with `onInput`.

This idea that Elm’s state includes buffer variables to keep track of these things is considerably different from other tools like React or Vue where there are component-level variables that typically store that data. I’ll have to get used to this.

---

<div class="post-metadata">

**Author:** ![samjk](https://avatars.discourse-cdn.com/v4/letter/s/4491bb/32.png) [@samjk](https://discourse.elm-lang.org/u/samjk)\
**Post date:** [February 10, 2022, 5:47pm UTC](https://discourse.elm-lang.org/t/i-cannot-render-a-basic-input-complains-about-type-mismatch/8057/4 "2022-02-10T17:47:33Z")

</div>

Yeah for me what helped was realizing that those characters have to be stored _somewhere_…in React it’s in a component and in Elm it’s in the Model. Was weird for me when I learned React as well!

---

<div class="post-metadata">

**Author:** ![jackyjoy123](https://avatars.discourse-cdn.com/v4/letter/j/d6d6ee/32.png) [@jackyjoy123](https://discourse.elm-lang.org/u/jackyjoy123)\
**Post date:** [March 14, 2022, 10:51am UTC](https://discourse.elm-lang.org/t/i-cannot-render-a-basic-input-complains-about-type-mismatch/8057/5 "2022-03-14T10:51:16Z")

</div>

> [@samjk](#):
>
> Yeah for me what helped was realizing that those characters have to be stored _somewhere_ …in React it’s in a component and in Elm it’s in the Model. Was weird for me when I learned React as well!

thanks my issue has been fixed.