title: In reflex-dom, how to pass a value from a dynamic to a foreign javascript function (FFI)
body: <p>I am new to Haskell and reflex-dom, but really like the language.  I've been using <a href="https://github.com/hansroland/reflex-dom-inbits/blob/master/tutorial.md" rel="nofollow noreferrer">https://github.com/hansroland/reflex-dom-inbits/blob/master/tutorial.md</a> to learn, and it's been very helpful.</p>
  
  <p>I am currently trying to create a function that takes in a dynamic and creates an element and calls an FFI function every time the value changes in the dynamic.  Here is a simplified version of what I'm trying to do.</p>
  
  <pre><code>{-# LANGUAGE OverloadedStrings #-}
  import Data.Text as T
  import qualified GHCJS.DOM.Types as GDT
  import GHCJS.Types
  import Reflex.Dom
  
  foreign import javascript safe
    "$1.value = $2"
    testSet :: JSVal -&gt; JSVal -&gt; IO()
  
  testTB :: DomBuilder t m =&gt; Dynamic t T.Text -&gt; m ()
  testTB dt = do
    (e, _) &lt;- elAttr' "input" ("type" =: "text") blank
    bob &lt;- (testSet (GDT.pToJSVal e) . GDT.pToJSVal) &lt;$&gt; dt
    return ()
  
  main = mainWidget $ testTB $ constDyn "Hello World!"
  </code></pre>
  
  <p>This results in the compile time error:</p>
  
  <pre><code>reflex-canvas.hs:14:10: error:
      • Couldn't match type ‘m’ with ‘Dynamic t’
        ‘m’ is a rigid type variable bound by
          the type signature for:
            testTB :: forall t (m :: * -&gt; *).
                      DomBuilder t m =&gt;
                      Dynamic t Text -&gt; m ()
          at reflex-canvas.hs:11:11
        Expected type: m (IO ())
          Actual type: Dynamic t (IO ())
      • In a stmt of a 'do' block:
          bob &lt;- (testSet (GDT.pToJSVal e) . GDT.pToJSVal) &lt;$&gt; dt
        In the expression:
          do { (e, _) &lt;- elAttr' "input" ("type" =: "text") blank;
               bob &lt;- (testSet (GDT.pToJSVal e) . GDT.pToJSVal) &lt;$&gt; dt;
               return () }
        In an equation for ‘testTB’:
            testTB dt
              = do { (e, _) &lt;- elAttr' "input" ("type" =: "text") blank;
                     bob &lt;- (testSet (GDT.pToJSVal e) . GDT.pToJSVal) &lt;$&gt; dt;
                     return () }
      • Relevant bindings include
          e :: Element EventResult (DomBuilderSpace m) t
            (bound at reflex-canvas.hs:13:4)
          dt :: Dynamic t Text (bound at reflex-canvas.hs:12:8)
          testTB :: Dynamic t Text -&gt; m () (bound at reflex-canvas.hs:12:1)
  </code></pre>
  
  <p>I've tried various ways to convert the Dynamic to a m() but cannot figure it out.  What is the best practice for doing this?</p>