How to get ReactElement from DOM?

Question

Let's say I have a ReactElement rendered for me in the DOM:

<form id="form" data-reactid='reactid.1'></form>

I can access the HTMLElement by doing

var element = document.getElementById('form');
element instanceof HTMLElement; // true
// ?? instanceof ReactElement

How do I get the ReactElement responsible for managing the form element?

possible duplicate of [React - get React component from a child DOM element?](http://stackoverflow.com/questions/24462679/react-get-react-component-from-a-child-dom-element) — Thilo, May 11 '15 at 00:12
Silly answer, but if this is for debugging purposes you could just use the React Chrome extension. If not, ignore me. — narak, May 11 '15 at 02:38
You should never want to do this. Perhaps you could explain why you want to do this so someone can offer an alternative? — Mike Driver, May 11 '15 at 21:28

score 0 · Answer 1 · answered May 12 '15 at 18:36

after the component has mounted you can find the element in the DOM via JavaScript as you asked or jQuery or anything els etyhat looks through the DOM.

However you would be probably better off adding a reference to the form and using Reacts internal model to find it quickly / directly, without having to walk the whole DOM to find it.

<form ref="myForm" data-reactid='reactid.1'></form>

then locate it like this.

var form = React.findDOMNode(this.refs.myForm);

How to get ReactElement from DOM?

1 Answers1