How to change background image of specific div with 'onclick' function in React.JS

Question

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:
TypeError: Cannot read property 'style' of null

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!

Here is my button

<button onClick={() => { this.changeUserBG(this.state.AlexPics[0], "one") }} className="btn btn-danger">Kaalia of the Vast</button>

here is the function I call

  changeUserBG = (imageUrl, userArea) => {
        let thisOne = document.getElementById(userArea);
        console.log(thisOne)
        thisOne.style.backgroundColor = 'red'
        // document.getElementById("one").style.backgroundImage = `require(url(${imageUrl}))`;

    }

Here is the div area I am trying to manipulate:


<div className="col-6" id="one">

       <div className="">

         <p className="lifeArea">
          <button className="minusOne" onClick={() => { 
              this.subtractOne("playerOne") }}>-1</button>
             <span id="playerOne">40</span>
             <button className="plusOne" onClick={() => { 
             this.addOne("playerOne") }}>+1</button>
         </p>

{/* Theme Modal that has ASK sub modals */}
<p className="bgCheckButton">
<button type="button" className="btn btn-primary" data-toggle="modal" data-target="#exampleModalScrollable">Theme</button>
</p>
</div>

wanna talk mtg? down for that too!

It looks like the div is not found while accessing its style. You must adjust the code to ensure that the div exists at that moment. — Pengson
– Pengson, Commented Jan 14, 2020 at 2:39
Since I am only calling the function on button click shouldn't it not check until it is clicked? — Jack Franklin
– Jack Franklin, Commented Jan 14, 2020 at 2:49
For the record, manually doing things like document.getElementById(userArea); in react code is strongly discouraged, I'd recommend looking at a react tutorial if you're new to it. Assuming you know what you're doing though - the error implies that <span id="playerOne"></span> isn't available on the page when you click the -1 button. I'd suggest verifying that it exists with dev tools before clicking it. I'd be willing to bet that it's not the div you were expecting, but a 3/3 Elk instead. — HPierce
– HPierce, Commented Jan 14, 2020 at 2:49
@JackFranklin If your goal is to secure the process, two options for you: 1. Disable the button until the div is added somehow. 2. Check the existence of the div in the click handler every time. — Pengson
– Pengson, Commented Jan 14, 2020 at 2:53
Is it possible that there is an issue with the this binding? I know that the primary advantage to using An arrow ()=> {...} over function() is that the arrow locks the this context. (But I stick by "Never expect this to be what you think this is") — Rich Werden
– Rich Werden, Commented Jan 14, 2020 at 5:26

Scalpweb · Accepted Answer · 2020-01-14 05:16:57Z

2

In react, you should not use getElementById or any method changing the dom. You could have something like this:

<div style={{backgroundImage: this.state.image}}>...</div>

So whenever you do:

this.setState({ image: 'some_value.png' });

the background image will be updated automatically.

In your case, if you need to change different div background based on div ID, you could store a map in your state, something like this:

clickHandler = (divId, color) => {
   this.setState(state => ({ backgroundColors: { [divId]: color, ...state.backgroundColors} }));
}

The line of code above might be hard to understand at first if you are not used to the spread operator, but what it does is actually simple: it adds a new key to map backgroundColors stored in the state.

And you would use it as such:

<div id="foo" style={{ backgroundImage: this.state.backgroundColors["foo"]}}>...</div>

edited Jan 14, 2020 at 5:16

answered Jan 14, 2020 at 2:51

Scalpweb

1,9711 gold badge12 silver badges14 bronze badges

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

Comments

Sohail Ashraf · Accepted Answer · 2020-01-14 03:13:54Z

0

You can use React ref api to get the refrence of the div and then you can change the style property of the div.

Sample Code

In Class constructor



constructor() {
  this.userAreaRef = React.createRef();
}

changeUserBG = (imageUrl, userArea) => {
  let thisOne = this.userAreaRef;
  console.log(thisOne)
  thisOne.current.style.backgroundColor = 'red'
}

Render

 <div ref={this.userAreaRef} className="col-6" id="one">
            <div className="">
                <p className="lifeArea">
                    <button className="minusOne" onClick={()=> { 
this.subtractOne("playerOne") }}>-1</button>
                    <span id="playerOne">40</span>
                    <button className="plusOne" onClick={()=> { 
this.addOne("playerOne") }}>+1</button>
                </p>
                {/* Theme Modal that has ASK sub modals */}
                <p className="bgCheckButton">
                    <button type="button" className="btn btn-primary" data-toggle="modal" data-target="#exampleModalScrollable">Theme</button>
                </p>
            </div>
        </div>

In functional component

const someFunction = () => {
  const userAreaRef = useRef();

  changeUserBG = (imageUrl, userArea) => {
    let thisOne = userAreaRef;
    console.log(thisOne)
    thisOne.current.style.backgroundColor = 'red'
  }

  return (
    <div ref={this.userAreaRef} className="col-6" id="one">
            <div className="">
                <p className="lifeArea">
                    <button className="minusOne" onClick={()=> { 
this.subtractOne("playerOne") }}>-1</button>
                    <span id="playerOne">40</span>
                    <button className="plusOne" onClick={()=> { 
this.addOne("playerOne") }}>+1</button>
                </p>
                {/* Theme Modal that has ASK sub modals */}
                <p className="bgCheckButton">
                    <button type="button" className="btn btn-primary" data-toggle="modal" data-target="#exampleModalScrollable">Theme</button>
                </p>
            </div>
        </div>
  );
}

answered Jan 14, 2020 at 3:13

Sohail Ashraf

10.7k3 gold badges31 silver badges43 bronze badges

3 Comments

Scalpweb Over a year ago

What is the purpose of using a reference here ? You should not use a reference when you do not need to, this is a react principle.

Sohail Ashraf Over a year ago

I agree with you but it's not wrong, you can use React ref api. If you don't want to maintain the state. Could you share some reference where React team is mentioning that we should not use Ref

Scalpweb Over a year ago

The fact that you can does not mean you should :) Here is a link to react doc: reactjs.org/docs/refs-and-the-dom.html It clearly says Avoid using refs for anything that can be done declaratively.

Collectives™ on Stack Overflow

How to change background image of specific div with 'onclick' function in React.JS

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related