Remove UI monad with ThreepennyGUI

Question

I'm really new to using the threepenny gui and I want to do something like this:

on UI.click button $ const $ do
        element reverseArea # set UI.text (reverse (get value area))

So when i click a certain button on the page i get the text from a textarea, reverse it and display it in a different text area. However when i try run this, I get the error :

 Couldn't match expected type ‘[Char]’ with actual type ‘UI String’

So I wanted to know how could I remove the UI monad so I can manipulate the text

Answer 1

I am not familiar with threepenny-ui, but I guess you need something like this:

on UI.click button $ const $ do
    s <- get value area
    element reverseArea # set UI.text (reverse s)

The rough idea is: when you have a value of type UI String you can use x <- value inside a do to get the string (without UI) and bind it to variable x. You can only do this if the rest of the do clock at the end returns value of a type UI T for some type T.

So, use <- as needed to get the pure values.

By the way, this is not specific to UI: every monad follows this principle. You will find plenty of monad tutorials around the net.