ReactDOM.findDOMNode with getAttribute("") returns null

Question

I am defining tooltip as

<MACDTooltip ref="MACDTooltip" forChart={chartId} forDataSeries={dataSeriesId} key={`${chartId}-${dataSeriesId}`} calculator={macdCalculator}
                onClick={logger.bind(null, { chartId, dataSeriesId }, options)} origin={[-48, 15]}/>

but in componentDidMount() method

ReactDOM.findDOMNode(this.refs.MACDTooltip).getAttribute("transform")

return null

ReactDOM.findDOMNode(this.refs.MACDTooltip)

returns

 <g><g class="react-stockcharts-toottip" transform="translate(-48, 15)"...</g></g>

and

ReactDOM.findDOMNode(this.refs.MACDTooltip).innerHTML

return "<g class="react-stockcharts-toottip" transform="translate(-48, 15)"></g>

How do i use ReactDOM.findDOMNode to get proper value

seems like you have two `` tags nested, ``. So the outer `` tag doesn't has the transform attribute. But the inner one has. — Murali Krishna, Feb 26 '17 at 09:58
i know, these are created by third party library so no control on that — Vikas Sardana, Feb 26 '17 at 10:00

Fabian Schultz · Accepted Answer · 2017-02-26T10:23:03.837

1

Since the g tags are nested, you want to find the childNode of it and get the attribute from there. Example:

class Example extends React.Component {
  componentDidMount() {
    console.log(
      ReactDOM.findDOMNode(this.refs.MACDTooltip).childNodes[0].getAttribute('transform')
    );
  }
  render() {
    return(
      <MACDTooltip ref="MACDTooltip" />
    );
  }
}

// Sample MACDTooltip class for demo.
class MACDTooltip extends React.Component {
  render() {
    return(
      <g>
        <g transform="Attribute"><text>Tooltip</text></g>
      </g>
    );
  }
}

ReactDOM.render(<Example />, document.getElementById('View'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="View"></div>

edited Feb 26 '17 at 10:23

answered Feb 26 '17 at 10:03

Fabian Schultz

18,138
5
49
56

the above code causing `Uncaught TypeError: Cannot read property '0' of undefined ` error – Vikas Sardana Feb 26 '17 at 10:14
What version of React are you using? And where are you calling it? – Fabian Schultz Feb 26 '17 at 10:15
react version is 15.4.2 and i am calling it from componentDidMount() method of the component where i am defining this tooltip – Vikas Sardana Feb 26 '17 at 10:18
Updated my answer. Since `MACDTooltip` is a component and not a regular DOM element you'll actually have to use `findDOMNode`. Does that work? – Fabian Schultz Feb 26 '17 at 10:23

ReactDOM.findDOMNode with getAttribute("") returns null

1 Answers1