TypeError when Dynamically Changing CSS in ReactJs Component

Question

I am trying to change the background color of my ReactJs web app dynamically when pressing the up arrow on a keyboard. However, when running this code, I am receiving the following error message:

Uncaught TypeError: Cannot read property 'setAttribute' of null

The component that this piece of code is placed in has one parent which renders the entire app.

handleKeyDownEvent(event) {

    if (event.keyCode == 38) {
        event.preventDefault();

        /*if up key or swipe up*/
        if (this.state.isInverted == false) {
            document.getElementById("body").setAttribute("background-color", "#000000");
            this.setState({ isInverted: true });
        }
        else {
            document.getElementById("body").setAttribute("background-color", "#FFFFFF");
            this.setState({ isInverted: false });
        }
    }
}

How would I fix this? Any suggestions on better methods to change the background color dynamically in React?

Thanks!

Can you show your markup? Doesn't seem like an element with id body exists. — Andrew Li
– Andrew Li, Commented Sep 11, 2016 at 4:36

xzegga · Accepted Answer · 2016-09-11 05:14:00Z

1

background-color is not a html attribute, is a css property, you can change style attribute and then set background-color as a value for style attribute, for example:

document.getElementById("body").setAttribute("style", "background-color:#000000");

This line will be add a style attribute to the body tag:

<body style="background-color: #00000">

answered Sep 11, 2016 at 5:14

xzegga

3,1693 gold badges28 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

finalfreq · Accepted Answer · 2016-09-11 04:52:22Z

0

If you are just trying to change the background color of the body element you can just do document.body.style.backgroundColor = 'red'

answered Sep 11, 2016 at 4:52

finalfreq

7,0202 gold badges29 silver badges28 bronze badges

Collectives™ on Stack Overflow

TypeError when Dynamically Changing CSS in ReactJs Component

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related