3

EDITED: I corrected how I do inject the code, it is not MDX related, it is simply plain html

I have html code that I insert to my React page with 

dangerouslySetInnerHTML={{ __html: myContent }}

Before, I've added some components to myContent with a simple regex.replace(), where I've replace some plain text with a React component transformed into plain html with 

ReactDOMServer.renderToString(<Input type="text" ref={inputRef}/>)

*<Input> is a styled component that returns a <input> element

However, I cannot access to inputRef, nor any onClick or onChange works

I do think that to enable these event listeners I should hydrate the component? Don't really know how it would apply here, and don't really know if hydrate is supposed to be applied in this user case (no server involved)

So the objective is that I can interact when this <input> is changed, but so far it is absolutely static html that I cannot access to

What could I do?

At the end I've added an <input id="blah"... and access it with vanilla JavaScript without any apparent trouble

Flip
  • 6,233
  • 7
  • 46
  • 75
GWorking
  • 4,011
  • 10
  • 49
  • 90
  • At the end I'm using vanilla JavaScript here, adding an `id=""` and working with `getElementById` as usual, if anyone has any other suggestion I'm all ears – GWorking Oct 01 '19 at 19:41
  • First of all. You need hydrate to add listeners and such. But as far as I know hydrate only works for listeners and such, which got attached in the process of a renderToString. What would be your motivation in rendering the input on the server? – tabulaR Oct 02 '19 at 08:41
  • Here there is no server, but somehow in the documentation it seems that hydrate is applicable when servers are involved? Anyway, how would hydrate work in this case, where I am changing plain html content that I will inject afterwards? – GWorking Oct 02 '19 at 11:12

0 Answers0