How to access rendered truncated text of element in React component?

Question

I have a sidebar where CSS limits the width of a string when rendering. How can I access the final, rendered string to diff my original prop and the rendered string?

I'm trying this in componentDidMount and everything I can access there is the original, complete string.

There is no #id on this element so cannot access that.

Answer 1

You could add a ref to the node and then use it to access the inner HTML attribute.

componentDidMount() {
  const text = this.sidebar.innerHTML
}
render() {
  return (
   <div ref={sidebar => {this.sidebar = sidebar}}>Some text here</div>
  )
}