Read data from React component?

Question

I would like to be able to read the data associated with a react component on a 3rd party web page that is using React. I want to be able to read this using javascript within the Chrome Dev console tools on that page. Is this possible?

For example, I have a TR element which is drawn by react. I would like to get this TR using regular document.getElementById() and then use that to get the underlying react data.

Using the React Developer Tools Extension I can see my data just sitting there under props.data - how can I read that?

Please note that I am treating React as a black box here.

Note: per this answer I can get a react object from a DOM element, and it works: React - getting a component from a DOM element for debugging

window.findReactComponent = function(el) {
  for (const key in el) {
    if (key.startsWith('__reactInternalInstance$')) {
      const fiberNode = el[key];

      return fiberNode && fiberNode.return && fiberNode.return.stateNode;
    }
  }
  return null;
};

But having gotten that, how can I get to props?

Close - this one gets me access to the element I want. https://stackoverflow.com/questions/29321742/react-getting-a-component-from-a-dom-element-for-debugging/39165137#39165137 But I still do not know how to get to the props of the thing. Close! — Daniel Williams, Nov 30 '20 at 22:35

score 1 · Answer 1 · answered Nov 30 '20 at 23:19

Aha I found the key. You need to be careful in getting the correct DOM element. I was trying too far down on the hierarchy. Once I used the React Dev tools extension to "Inspect the matching DOM element", then I had the right element and was able to get its props.

Read data from React component?

1 Answers1