Manipulating jsoo react attributes as a first class value

Learning
1

Consider the following code:

let x = div [| width="..." ; onClick = (fun ... ) |] [ ... ]

let us call the width/onClick in the [| ... |] the attributes.

Questions:

  1. What is the type of this thing? It confuses me we can have width be a string, onClick be a function.

  2. Is there a way to manipulate this as a first class value? For example. I want to say:

let x = [| width = "100"; onClick = ... |] in
let y = take x, but update width with "200"

Thanks!

2

Assuming you’re using OCaml syntax here, I think your example is wrong. Those “attributes” as you call them are functions which are called, meaning your example should look like:

let x = div [| width "npx"; onClick (fun _ -> ()); ... |] [ ... ]

These functions (such as width and onClick) both return a value of Dom_html.Prop.t.

As for your second question, AFAIK there’s no super ergonomic way to do this. One possibility (which I’m unsure about) is that browsers might make some choice about which attribute to use when there are duplicates (i.e. the first/last). You could copy the array x and add one extra element which you want to override.

2 Likes
3

You’re right, I made a mistake, there are no ‘=’. Those are function calls. This actually clears up quite a bit. Thanks!