How to find React component DOM node name?

Question

I am developing a React app which has ReCharts for creating bargraphs. Besides showing in the screen I want to export the graphic to a file to store in database.

As I saw in other question here, to export a chart I can do:

let chartSVG = ReactDOM.findDOMNode(this.currentChart).children[0];
let svgBlob = new Blob([chartSVG.outerHTML], {type: "text/html;charset=utf-8"});

However I am failing to insert the DOM node name of the chart (this.currentChart). The way the other question uses doesn't work for me:

Uncaught TypeError: Cannot set property 'currentChart' of undefined

I tried the component name inside findDOMNode, but got error:

Uncaught Error: Element appears to be neither ReactComponent nor DOMNode

My graph component is in another file and is declared inside my top level render() function as below:

render () {
  return(
    <div ...
      ...
      <br />
        <MyBarChart 
            id="currentChart" 
            ref={(chart) => this.currentChart = chart}
            data={this.props.dataGraph}
         />
      <br />
      ...
    </div>
  );
}

How do I call ReactDOMNode to be able to export the chart?

Could you maybe post the code of your full component? Ideally in a CodePen or similar. — Matt Holland, Nov 08 '17 at 18:19
sure, please check JS part at: https://codepen.io/dpetrini/pen/jaVejO — dpetrini, Nov 08 '17 at 18:23
I don't see the `ReactDOM.findDOMNode(this.currentChart)` in the codepen. — Rick Jolly, Nov 08 '17 at 18:30
Do you have a stack trace with the error? What line of code is it coming from? — Matt Holland, Nov 08 '17 at 18:36
`this.currentChart` belongs to the child component, but you are trying to reference it in the parent. — Rick Jolly, Nov 08 '17 at 18:42
It seems so, but is there any way to call some name from the DOM, instead of using ref? — dpetrini, Nov 08 '17 at 18:49
The error is because you are using a functional component instead of a class component. There is no `this` to assign `currentChart` to. Once you've fixed that, looking at your code, you should be able to do `this.currentChart.currentChart`. — Rick Jolly, Nov 08 '17 at 19:01
After changing to class component and calling this.currentChart.currentChart, It worked, thank you! — dpetrini, Nov 08 '17 at 19:28

score 0 · Answer 1 · answered Nov 08 '17 at 18:23

0

The ref you're using will return the entire DOMElement to this.currentChart, furthermore you must ensure you're attempting to save the graph after the MyBarChart component has finished mounting, only then will it return its ref.

Further, is MyBarChart connected with Redux?

If so, the ref will need to be unwrapped as...

this.currentChart.getWrappedInstance()

answered Nov 08 '17 at 18:23

Joshua Underwood

919
4
14

Still getting the error: Uncaught TypeError: Cannot set property 'currentChart' of undefined . No Redux in this part. It is called by a button, so after mounting. – dpetrini Nov 08 '17 at 18:31
What is the context you are trying to set currentChart of? "Cannot set property of undefined" means that the object is undefined, in your case THIS is what is undefined. In your ref before you set this.currentChart do an `alert(this);` and ensure you get [Object object] – Joshua Underwood Nov 08 '17 at 18:38

score 0 · Answer 2 · answered Nov 08 '17 at 18:40

0

You're scoping THIS to the ref function

change

ref={(chart) => this.currentChart = chart}

to

ref={(chart) => { this.currentChart = chart; } }

answered Nov 08 '17 at 18:40

Joshua Underwood

919
4
14

Without the leading and trailing curly braces you're returning the result of the assignment of chart to this.currentChart to a prop rather than assigning the ref's value to a class property. – Joshua Underwood Nov 08 '17 at 18:43
same result of undefined – dpetrini Nov 08 '17 at 18:48
I noticed your comment about him using a functional component, being that he had a render method I didn't even notice it was functional. Whoops! – Joshua Underwood Nov 08 '17 at 19:05

How to find React component DOM node name?

2 Answers2