1

On ReasonReact, if I want to render a specific element on a HTML element by id I can use the built-in function renderToElementWithId(ReasonReact.reactElement, Dom.element), for example:

ReactDOMRe.renderToElementWithId(<MyComponent />, "myComponent");

I have multiple <input /> HTML tags, and I want it to be rendered in every <input /> which has a specific data attribute. More specifically, I want that each input which has data-type="tags" on it be rendered by <MyComponent />. On Javascript we could do something like document.querySelectorAll("[data-type=tags]") and iterate the result rendering the components.

Although, I can't find anywhere in the documentation of ReasonReact nor BSB about how to do this. Can someone help me?

Thanks, in advance.

Mateus Felipe
  • 1,071
  • 2
  • 19
  • 43

1 Answers1

1

ReasonReact has a ReactDOMRe.render function that takes a Dom.element. You can then define querySelectorAll yourself, if you wish:

[@bs.val] [@bs.scope "document"]
external querySelectorAll : string => Dom.element = "";

querySelectorAll("[data-type=tags]")
|> Js.Array.forEach(element => ReactDOMRe.render(<MyComponent />, element));

Or you can use bs-webapi, which gives you querySelectorAll along with a whole heap of other DOM functions if you need them.

glennsl
  • 28,186
  • 12
  • 57
  • 75
  • I was wondering if it would be really neccessary to use "unsafe" code (JS interop) or if there was a built-in funcionários for this. Thanks. – Mateus Felipe Dec 21 '17 at 09:15
  • 2
    That's why I pointed towards bs-webapi. That's safe, but you might find that the DOM API wasn't designed to be safe, and that it's a bit cumbersome to deal with it safely. – glennsl Dec 21 '17 at 09:20