title: How to change background image of specific div with 'onclick' function in React.JS
body: <p>Thanks for helping my needy butt. 
  I am working with ReactJS and trying to get a div to change it's background from a color to a specific image url on click of a button in a modal.
  I have tried many things and keep getting this error:<br>
   <strong>TypeError: Cannot read property 'style' of null</strong></p>
  
  <p>I successfully console.log the image URL and div ID within the onclick function, but the div styling is getting nowhere...All help is appreciated!</p>
  
  <p>Here is my button</p>
  
  <pre><code>&lt;button onClick={() =&gt; { this.changeUserBG(this.state.AlexPics[0], "one") }} className="btn btn-danger"&gt;Kaalia of the Vast&lt;/button&gt;
  </code></pre>
  
  <p>here is the function I call</p>
  
  <pre><code>  changeUserBG = (imageUrl, userArea) =&gt; {
          let thisOne = document.getElementById(userArea);
          console.log(thisOne)
          thisOne.style.backgroundColor = 'red'
          // document.getElementById("one").style.backgroundImage = `require(url(${imageUrl}))`;
  
      } 
  </code></pre>
  
  <p>Here is the div area I am trying to manipulate:</p>
  
  <pre><code>
  &lt;div className="col-6" id="one"&gt;
  
         &lt;div className=""&gt;
  
           &lt;p className="lifeArea"&gt;
            &lt;button className="minusOne" onClick={() =&gt; { 
                this.subtractOne("playerOne") }}&gt;-1&lt;/button&gt;
               &lt;span id="playerOne"&gt;40&lt;/span&gt;
               &lt;button className="plusOne" onClick={() =&gt; { 
               this.addOne("playerOne") }}&gt;+1&lt;/button&gt;
           &lt;/p&gt;
  
  {/* Theme Modal that has ASK sub modals */}
  &lt;p className="bgCheckButton"&gt;
  &lt;button type="button" className="btn btn-primary" data-toggle="modal" data-target="#exampleModalScrollable"&gt;Theme&lt;/button&gt;
  &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>wanna talk mtg? down for that too!</p>