无法访问React Typescript中的DOM元素

Question

I am making an application with a table where the rows expand when clicked on. I have implemented the expansion of rows already (I am using a very similar idea as this link ).

Based on the referred link above, in the expanded rows (under line 43), I want to add a <div> element with id={item.id} . Then just before we exit the if block, I want to send that <div> element I just made with id={item.id} to an external method (eg. an external API).

Right now, I am trying to do document.getElementById(item.id) but it returns undefined . I also tried using refs, but was getting the same problem.

The thing is, if I move the <div> element to let's say the render method, everything works fine. It's just here that I'm having troubles accessing the DOM element.

Does anyone know where I'm going wrong?

JSFiddle: https://jsfiddle.net/n5u2wwjg/101051/

Answer 1

Use React's refs to capture the DOM element, and access that DOM in componentDidMount(). The DOM you're referring to in render() method is React's virtual DOM, and at the time render method was called first time, it's not actually display on the browser yet, that's why document.getElementById return undefined