Element does not exist in React's componentDidMount

Question

I have following react component:

var ForumActivityTimeLine = React.createClass({
    componentDidMount: function () {
        this.showActivityLineChart()
    },

    showActivityLineChart() {
        const lineChartSpec = getForumActivityLineChart(this.props.data.frequency)
        const opt = {
            renderer: "canvas",
            actions: false
        };
        vegaEmbed('#ForumActivityLineChart', lineChartSpec, opt)
    }, 

    render() {
        return (
            <span>
                <h5 style={{ textAlign: "center", fontWeight: "bold", display: "block", paddingTop: '2em' }}> Forum Activity Timeline</h5>
                <div className="d-flex justify-content-around" style={{ paddingTop: "0.5em" }}>
                    <div id='#ForumActivityLineChart'></div>
                </div>  
            </span>
        )
    }
})

vegaEmbed line is trying to render a line chart in the div with id ForumActivityLineChart, but it gives me following error:

embed.ts:296 Uncaught (in promise) Error: #ForumActivityLineChart does not exist
    at Kn (embed.ts:296:11)
    at Jn (embed.ts:259:16)

Here is the error desscription in console:

In chrome dev tools console, you can see that the corresponding div element does exist (ignore setTimeout call in snapshot, I thought if I can dirty set some timeout to let the component render first):

Here is another screenshot, where debugger stops before throwing exception:

PS: I am working on legacy react app, thats why I have var and componentDidMount.

score 0 · Accepted Answer · answered Oct 19 '22 at 15:56

0

You should not include # in the id-attribute.

Replace

<div id='#ForumActivityLineChart'></div>

with

<div id='ForumActivityLineChart'></div>

answered Oct 19 '22 at 15:56

Fralle

889
6
12

Incredible that I can do that! And am quite sure that I would have never noticed it myself! Should I just delete this question? – MsA Oct 19 '22 at 16:02
The # is used in querySelector and in CSS to indicate that it's targeting the id attribute. Similarly, the attribute class uses . as a prefix. https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors – Fralle Oct 19 '22 at 16:04
Yeah of course I know that. It was just the stupid mistake on my side. Wasted couple of hours on this! I was debugging react flow. – MsA Oct 19 '22 at 16:10
1

Ah, gotcha. Glad it got resolved, a wise developer once said that if you debug an issue for more than one hour you probably have a typo :) – Fralle Oct 19 '22 at 16:13

Element does not exist in React's componentDidMount

1 Answers1