Purescript Halogen Component, Input vs State - purescript

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 = ""