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";
      }

  }

Answer 1

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";

Answer 2

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;