React and Javascript question, button change background color

Question

My problem is, the function doesn't find the classname i tried with id but the same error occur. How do i solve this problem or how i do to my function "see" the class, probably is a simple mistake but i don't find the problem

return(
...
<div className="midia-wrapper">
  {renderFile()}
</div>
...
<button onClick={changeBackground} className="change-background">
        Change Background <i className="fas fa-palette"></i>
</button>

Javascript and css

function changeBackground() {

      const randomnumber = Math.floor(Math.random()*10)
      const back = document.getElementsByClassName("midia-wrapper");

        switch(randomnumber) {
          case 1:
            back.body.style.backgroundColor = "#ffffff";
            break;
          case 2:
            back.body.style.backgroundColor = "#000000";
            break;
          case 3:
            back.body.style.backgroundColor = "#008bb2";
            break;
          case 4:
            back.body.style.backgroundColor = "#0935B3";
            break;
          case 5:
            back.body.style.backgroundColor = "#B33212";
            break;
          case 6:
            back.body.style.backgroundColor = "#B38612";
            break;

          default:
            back.body.style.backgroundColor = "#ffffff";
      }

  }

You should change approach; with React you do not access the DOM directly but you rely on state, props and, if you really have to, refs. What you can do is having your changeBackground() function change a local state and set it to the generated color; then refer to that state to set the background color — secan
– secan, Commented Dec 10, 2020 at 14:01

topdev87 · Accepted Answer · 2020-12-10 13:59:18Z

2

getElementsByClassName("midia-wrapper") result is all the DOM elements that has the class name midia-wrapper, so you should indicate using array index.

back[0].style.backgroundColor = "#ffffff";

answered Dec 10, 2020 at 13:59

topdev87

8,7913 gold badges11 silver badges33 bronze badges

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

Comments

secan · Accepted Answer · 2020-12-10 14:32:10Z

As mentioned in my comment, in React you do not access the DOM directly; a way to do what you want to do is:

import React, { useState } from "react";

const selectRandomColor = () => {
    const randomnumber = Math.floor(Math.random() * 10);

    switch (randomnumber) {
        case 1:
            return "#ffffff";
        case 2:
            return "#000000";
        case 3:
            return "#008bb2";
        case 4:
            return "#0935B3";
        case 5:
            return "#B33212";
        case 6:
            return "#B38612";
        // ...
        default:
            return "#ffffff";
    }
};

const MyComponent = () => {
    const [bgColor, setBgColor] = useState(selectRandomColor());

    return (
        <React.Fragment>
            <div className="midia-wrapper" style={{ backgroundColor: bgColor }}>
                {renderFile()}
            </div>

            <button
                onClick={() => setBgColor(selectRandomColor())}
                className="change-background"
            >
                Change Background <i className="fas fa-palette"></i>
            </button>
        </React.Fragment>
    );
};

export default MyComponent;

Collectives™ on Stack Overflow

React and Javascript question, button change background color

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