Getting "TypeError: document.getElementById(...) is null" when using react.js with chart.js

Question

I am using react and chart.js together to plot bar chart. But in chart.js we have to use canvas tags and to find that tag and to place bar chart in it we use our normal document.getElementById() method. I tried lots of combinations like putting document.getElementById() at the beginning, or inside a $(document).ready(), even within react's componentDidMount() method. But Still I am getting "TypeError: document.getElementById(...) is null". If anyone know about it, please give me a suggestion. Thank You.

Here is the code which I am trying to execute:

var React = require("react");

var Chart = React.createClass({

    getDefaultProps: function() {
        barChartData = {
            labels : ["Option1", "Option2"],
            datasets : [
                {
                    fillColor : "rgba(220,220,220,0.5)",
                    strokeColor : "rgba(220,220,220,0.8)",
                    highlightFill: "rgba(220,220,220,0.75)",
                    highlightStroke: "rgba(220,220,220,1)",
                    data : [65, 35]
                }
            ]
        }
    },

    onload: function() {
        console.log(document.getElementById('canvas_poll'));
        var ctx = document.getElementById("canvas_poll").getContext("2d");

        window.myBar = new Chart(ctx).HorizontalBar(this.props.barChartData, {
            responsive : true,
        });
    },

    componentDidMount: function() {
        this.onload();
    },

    render: function() {

        return (
            <div>
                <canvas classID="canvas_poll" height={100} width={600}></canvas>
            </div>
        );
    }

});

module.exports = Chart;

as @CallanHeard suggested, there is no such thing as classID attribute that I am aware of. you have to use id attribute. — Tahir Ahmed
– Tahir Ahmed, Commented Sep 6, 2015 at 13:40

Community · Accepted Answer · 2017-05-23 12:30:16Z

I had a similar problem with a react web app I was building. In addition to what was said in the previous solution, there are a few things I think you might find helpful based on what I read in the comments.

Script is ran before the element actually exists

One common problem is that the element does not exist at the time of rendering.

for example if your HTML looked like

    <script src="**your file **" type="text/babel"></script>
    <div id="canvas_poll"></div>

then your script would be ran before the div with the id you are looking for could get rendered. However, when switched, the script is ran after the div is formed.

    <div id="canvas_poll"></div>
    <script src="**your file **" type="text/babel"></script>

That way, the element that the script is looking for actually exists and can be found.

Some solutions to this are listed in this link Why does jQuery or a DOM method such as getElementById not find the element?

Change <div /> to <div></div>

In my case, I was still getting null from my getElementById method after running the script after the div was formed. It ended up being how the target divs were set up.

I'm not sure why, but when my target div looked like

    <div id= "target1"/>
    <script src="target1.jsx" type="text/babel"></script>

I could render to that container using react. However, if I tried to render a second react element:

    <div id= "target1"/>
    <script src="target1.jsx" type="text/babel"></script>
    <div id= "target2"/>
    <script src="target2.jsx" type="text/babel"></script>

The first react element would show up but the second would not. What I did to fix it was change the div formatting from

     <div id="target"/>

to

     <div id="target></div>

on all the target divs.

After I made that change, all my react elements came in fine. I'm not sure why it worked that way, but I hope it is helpful.

Callan Heard · Accepted Answer · 2015-09-06 12:54:39Z

1

The document.getElementById() uses an element's 'ID' attribute, not 'classID' (which is also unsupported by the 'canvas' tag). Try adding id="canvas_poll" to the canvas element like so:

<canvas id="canvas_poll" height={100} width={600}></canvas>

answered Sep 6, 2015 at 12:54

Callan Heard

7271 gold badge8 silver badges19 bronze badges

7 Comments

Swapnil Bhikule Over a year ago

I guess in react.js we use classID in react DOM as an id. But I tried that too. But still it's giving me the same error.

Callan Heard Over a year ago

@SwapnilBhikule could you show me the mark-up content and the errors please?

Swapnil Bhikule Over a year ago

I even tried console.log(document.getElementById('canvas_poll')) but again its returning null value.

Callan Heard Over a year ago

I understand the program code is the same but could you show me the element mark-up? Where is the code being rendered, in browser? Some screenshots/codes dumps would be very helpful!

Swapnil Bhikule Over a year ago

I didn't see any method of uploading screenshot in comment and yeah, the code being rendered in browser.

|

Collectives™ on Stack Overflow

Getting "TypeError: document.getElementById(...) is null" when using react.js with chart.js

2 Answers 2

Comments

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related