I’ve got this module where I’m trying to take the result of a StringMap component map and generate ReasonReact elements from the iterated data. I can log the stringMap to console but can figure out how to move the info to the dom element. Any ideas would be greatly appreciated. Anyone? Anyone?
Thanks in advance.
It looks like you just need to use map instead of iter, and that will give you a List, so you’ll need to do Array.of_list on the result of that, then pass it to arrayToElement as you have.
I’m a bit confused about the key##name though, what are you trying to do there?
@sgrove, i was trying to pass the component##name to stringToElement the turned it to a string to see if it would render at all.
So this is what I have if im following you,
let make = _children => {
...component,
render: _self =>
<div className="App">
<ul>
(
Mapped.componentMap
|> Mapped.StringMap.map((name, component) =>
<li key=name>
(ReasonReact.stringToElement(component##name))
</li>
)
|> ReasonReact.arrayToElement
)
</ul>
</div>,
};
Which throws this error which I would like to know how to deal with. Am i wrong to say I need to deal with optional results? If so, how do i do that?
We've found a bug for you!
/Users/prisc_000/code/BHYV/decode-gist/src/GenerateComponents.re 13:14-17:14
11 ┆ (
12 ┆ componentMap
13 ┆ |> StringMap.map((name, component) =>
14 ┆ <li key=name>
15 ┆ (ReasonReact.stringToElement(component##name))
16 ┆ </li>
17 ┆ )
18 ┆ |> ReasonReact.arrayToElement
19 ┆ )
This has type:
ReactTemplate.Mapped.StringMap.t(string) =>
ReactTemplate.Mapped.StringMap.t({.. "name": string} =>
ReasonReact.reactElement)
But somewhere wanted:
ReactTemplate.Mapped.StringMap.t({. "examples": option(array(string)),
"name": ReactTemplate.Mapped.StringMap.key,
"props": option({. "active": option(
{. "opacity":
int,
"transition":
string}),
"borderColor":
option(string),
"color": option(
string),
"fontSize":
option(array(int)),
"fontWeight":
option(string),
"hover": option(
{. "opacity":
int,
"transition":
string}),
"mb": option(int),
"mt": option(float),
"my": option(int),
"src": option(
string),
"w": option(float)}),
"style": option({. "display":
option(string),
"height": option(
string),
"letterSpacing":
option(string),
"lineHeight":
option(string),
"maxWidth":
option(string),
"opacity": option(
int),
"overflow":
option(string),
"textAlign":
option(string),
"textDecoration":
option(string),
"textTransform":
option(string),
"transition":
option(string),
"whiteSpace":
option(string),
"width": option(
string)}),
"type": option(string)}) =>
'a
The incompatible parts:
ReactTemplate.Mapped.StringMap.t(string) (defined as
Map.Make(String).t(string))
vs
ReactTemplate.Mapped.StringMap.t({. "examples": option(array(string)),
"name": ReactTemplate.Mapped.StringMap.key,
"props": option({. "active": option(
{. "opacity":
int,
"transition":
string}),
"borderColor":
option(string),
"color": option(
string),
"fontSize":
option(array(int)),
"fontWeight":
option(string),
"hover": option(
{. "opacity":
int,
"transition":
string}),
"mb": option(int),
"mt": option(float),
"my": option(int),
"src": option(
string),
"w": option(float)}),
"style": option({. "display":
option(string),
"height": option(
string),
"letterSpacing":
option(string),
"lineHeight":
option(string),
"maxWidth":
option(string),
"opacity": option(
int),
"overflow":
option(string),
"textAlign":
option(string),
"textDecoration":
option(string),
"textTransform":
option(string),
"transition":
option(string),
"whiteSpace":
option(string),
"width": option(
string)}),
"type": option(string)})
(defined as
Map.Make(String).t({. "examples": option(array(string)),
"name": ReactTemplate.Mapped.StringMap.key,
"props": option({. "active": option({. "opacity":
int,
"transition":
string}),
"borderColor": option(string),
"color": option(string),
"fontSize": option(array(int)),
"fontWeight": option(string),
"hover": option({. "opacity":
int,
"transition":
string}),
"mb": option(int),
"mt": option(float),
"my": option(int),
"src": option(string),
"w": option(float)}),
"style": option({. "display": option(string),
"height": option(string),
"letterSpacing": option(string),
"lineHeight": option(string),
"maxWidth": option(string),
"opacity": option(int),
"overflow": option(string),
"textAlign": option(string),
"textDecoration": option(string),
"textTransform": option(string),
"transition": option(string),
"whiteSpace": option(string),
"width": option(string)}),
"type": option(string)}))
Further expanded:
string
vs
{. "examples": option(array(string)),
"name": ReactTemplate.Mapped.StringMap.key,
"props": option({. "active": option({. "opacity": int,
"transition": string}),
"borderColor": option(string),
"color": option(string),
"fontSize": option(array(int)),
"fontWeight": option(string),
"hover": option({. "opacity": int,
"transition": string}),
"mb": option(int), "mt": option(float),
"my": option(int), "src": option(string),
"w": option(float)}),
"style": option({. "display": option(string),
"height": option(string),
"letterSpacing": option(string),
"lineHeight": option(string),
"maxWidth": option(string), "opacity": option(int),
"overflow": option(string),
"textAlign": option(string),
"textDecoration": option(string),
"textTransform": option(string),
"transition": option(string),
"whiteSpace": option(string),
"width": option(string)}),
"type": option(string)}
ninja: build stopped: subcommand failed.