# I am having a hardtime changing background color

**URL:** <https://forum.freecodecamp.org/t/i-am-having-a-hardtime-changing-background-color/367915>\
**Category:** General\
**Created:** [April 4, 2020, 7:05am UTC](https://forum.freecodecamp.org/t/i-am-having-a-hardtime-changing-background-color/367915 "2020-04-04T07:05:34Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![DVGY](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dvgy/32/130717_2.png) [@DVGY](https://forum.freecodecamp.org/u/DVGY)\
**Post date:** [April 4, 2020, 7:05am UTC](https://forum.freecodecamp.org/t/i-am-having-a-hardtime-changing-background-color/367915/1 "2020-04-04T07:05:34Z")

</div>

In Random Machine Quote Challenge, when i click the `NEW` button how do i change the `body background-color: this.state.color`.

What ever value is in my `color` properties i want it to reflect it to body.

I tried `document.body.style = 'background: red;';`. It does not take color property .

> **[Random Quote Machine - CodeSandbox](https://codesandbox.io/s/random-quote-machine-fl6tc)**
>
> Random Quote Machine by DVGY using @fortawesome/fontawesome-svg-core, @fortawesome/free-brands-svg-icons, @fortawesome/free-solid-svg-icons, @fortawesome/react-fontawesome, bootstrap, react, react-bootstrap, react-dom, react-scripts

  
This is link of of code .

Thanks

---

<div class="post-metadata">

**Author:** ![lasjorg](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/lasjorg/32/280761_2.png) [@lasjorg](https://forum.freecodecamp.org/u/lasjorg)\
**Post date:** [April 4, 2020, 5:21pm UTC](https://forum.freecodecamp.org/t/i-am-having-a-hardtime-changing-background-color/367915/2 "2020-04-04T17:21:40Z")

</div>

You can use a div instead of a fragment and give it some inline styles.

```auto
<div style={{height: "100%", background: this.state.color}}>
  <QuoteBox
    color={this.state.color}
    click={this.state.click}
    onGetQuote={this.handleGetQuote}
    quote={this.state.quote}
    author={this.state.author}
  />
</div>

```

You may also want to look at the range of the index you are generating for the `colorCodeHex` array.

---

<div class="post-metadata">

**Author:** ![DVGY](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dvgy/32/130717_2.png) [@DVGY](https://forum.freecodecamp.org/u/DVGY)\
**Post date:** [April 5, 2020, 11:42am UTC](https://forum.freecodecamp.org/t/i-am-having-a-hardtime-changing-background-color/367915/3 "2020-04-05T11:42:30Z")

</div>

> [@lasjorg](#):
>
> style={{height: “100%”, background: this.state.color}}

Thank you. so much it solved my issue

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [June 1, 2021, 7:00pm UTC](https://forum.freecodecamp.org/t/i-am-having-a-hardtime-changing-background-color/367915/4 "2021-06-01T19:00:12Z")

</div>