Purescript Halogen Component, Input vs State

Question

I want to make a Halogen Component where the component's input differs from its state. According to the guide for Halogen (https://github.com/slamdata/purescript-halogen/blob/master/docs/5%20-%20Parent%20and%20child%20components.md#input-values) this should be possible. I changed the example from the guide as follows

import Prelude
import Data.Int (decimal, toStringAs)
import Halogen as H
import Halogen.HTML as HH
import Halogen.HTML.Events as HHE

type Input = Int

type State = String

data Query a = HandleInput Input a

component :: forall m. H.Component HH.HTML Query Input Void m
component =
  H.component
    { initialState: id
    , render
    , eval
    , receiver: HHE.input HandleInput
    }
  where

  render :: State -> H.ComponentHTML Query
  render state =
    HH.div_
      [ HH.text "My input value is:"
      , HH.strong_ [ HH.text (show state) ]
      ]

  eval :: Query ~> H.ComponentDSL State Query Void m
  eval = case _ of
    HandleInput n next -> do
      oldN <- H.get
      when (oldN /= (toStringAs decimal n)) $ H.put $ toStringAs decimal n
      pure next

But then I get a compile error at the line with , receiver: HHE.input HandleInput

Could not match type

  String

with type

  Int

What am I doing wrong here?

Answer 1

The initialState is computed using the input value, and in the code you pasted it's implemented as id, so it's trying to force the input and state types to match.

Answer 2

Changed line { initialState: id in { initialState: const initialState and added after where the following lines

initialState :: State
initialState = ""