View with multiple textareas, how to identify which was modified?

Question

I'm making a simple page with multiple textarea elements in Elm. I'm struggling to get the data saved and especially identifying which textarea was updated. Maybe an example illustrates the point better

I have multiple elements made in view from a list

type alias Model = { List Comment, ... }

type alias Comment = {id: Int, content: String, draftContent: String, ...}

type Event = Save Comment | SaveDraft String

-- view
model.comments
|> List.map(     --iterate the list of comments and render html 
div [attrubute "name" "comment"] [
  textarea [onInput SaveDraft] [text comment.content],
  button [onClick (Save comment)] [text "Post comment"]
]

-- update
case event of
  Save comment ->
    -- Replace the comment content with draft data and clear draft

  SaveDraft draftText ->
     -- Update the draft content with text from event
     -- Which Comment is it?

Based on examples here I came up with the idea of sending each textarea input as an event to update function and saving the draft data.

Now the problem here is that onInput only accepts types with a String parameter and I have no means of identifying which one of the comments was modified.

Uri Goren · Accepted Answer · 2018-02-11T18:16:25.570

Change the Event union type to include the comment (SaveDraft String --> SaveDraft Comment String)

type Event = Save Comment | SaveDraft Comment String

-- view
model.comments
|> List.map(     --iterate the list of comments and render html 
div [attrubute "name" "comment"] [
  textarea [onInput (SaveDraft comment.content)] [text comment.content],
  button [onClick (Save comment)] [text "Post comment"]
]

Currying causes (SaveDraft comment.content) to have the same return value as before

View with multiple textareas, how to identify which was modified?

1 Answers1