Trying to toggle the CSS background image in this React app. I've imported the images. And then I set a variable "image" to the imported image as the iteration increases/decreases on click.

Problem is the body background image doesn't seem to update. I thought that a background image would refresh in componentDidUpdate because the iterative buttons toggle setState which should force a render. 

```
import Background1 from "../images/bg/1.png";
import Background2 from "../images/bg/3.png";
import Background3 from "../images/bg/4.png";

class UserPreferences extends Component {
  constructor(props) {
    super(props);
    this.state = {
      backgroundNumber: 1
    };
  }

  buttonNumberCalcPlus = () => {
    this.setState({ backgroundNumber: ++this.state.backgroundNumber });
  };

  buttonNumberCalcMinus = () => {
    this.setState({ backgroundNumber: --this.state.backgroundNumber });
  };

  componentDidUpdate() {
    var currentBackground = "Background" + this.state.backgroundNumber;
    console.log(currentBackground);

    var image;

    if (this.state.backgroundNumber == 1) {
      image = Background1;
    } else if (this.state.backgroundNumber == 2) {
      image = Background2;
    } else {
      image = Background3;
    }

    var mainBg = {
      backgroundImage: "url( " + { image } + ")"
    };
    console.log(mainBg);
    document.body.style = { mainBg };
  }

  render() {
    return (
      <div>
        <MainMenuToolbar />
        <h2 className="texttimezonepref">Change background image.</h2>
        <button
          id="next"
          onClick={this.buttonNumberCalcPlus}
          className="addbutton"
        >
          NEXT
        </button>
        <button
          id="prev"
          onClick={this.buttonNumberCalcMinus}
          className="subtractbutton"
        >
          PREV
        </button>
      </div>
    );
  }
}

```

Is this the correct way to change the background in componentDidUpdate:

```
var mainBg = {
  backgroundImage: "url( " + { image } + ")"
};

document.body.style = { mainBg };

```