How can you update the background image of a particular div using the 'onclick' feature in React.JS?

Question

How can you update the background image of a particular div using the 'onclick' feature in React.JS?

Thank you for helping me out here. I'm currently working with ReactJS and facing a challenge where I need to change the background of a div from a color to a specific image URL upon clicking a button in a modal. Despite my efforts, I keep encountering the following error:
TypeError: Cannot read property 'style' of null

While I am able to successfully log the image URL and div ID within the onclick function, I seem to be hitting a roadblock when it comes to styling the div itself. Any guidance or assistance on this matter would be greatly appreciated!

Below is the button triggering the action:

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

And here's the function being invoked:

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

    }

The target div that I'm attempting to modify looks like this:


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

If you're interested in discussing MTG (Magic: The Gathering), I'm all ears for that too!

javascript html css reactjs background

Answer 1

Answer №1

When working with React, it's recommended to avoid using getElementById or any other method that directly manipulates the DOM. Instead, you can achieve what you need by following this approach:

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

By setting the state like this:

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

The background image will automatically be updated. If you want to change the background of different divs based on their ID, you can use a map in your state as shown below:

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

At first glance, the line of code above may seem complex if you're unfamiliar with the spread operator. However, its purpose is simple - it adds a new key to the map called backgroundColors stored in the state.

You can then utilize it like this:

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

Answer 2

When working with React, it's recommended to avoid using getElementById or any other method that directly manipulates the DOM. Instead, you can achieve what you need by following this approach:

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

By setting the state like this:

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

The background image will automatically be updated. If you want to change the background of different divs based on their ID, you can use a map in your state as shown below:

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

At first glance, the line of code above may seem complex if you're unfamiliar with the spread operator. However, its purpose is simple - it adds a new key to the map called backgroundColors stored in the state.

You can then utilize it like this:

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

Answer 3

Answer №2

To access the reference of a div in React, you can utilize the ref API and then modify the style property of the div.

Example Code

Within 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>

Within 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>
  );
}

Answer 4

To access the reference of a div in React, you can utilize the ref API and then modify the style property of the div.

Example Code

Within 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>

Within 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>
  );
}

How can you update the background image of a particular div using the 'onclick' feature in React.JS?

Answer №1

Answer №2

Similar questions

The modal is functioning properly on Firefox and Internet Explorer, but it is experiencing issues

What could be the issue with my JSON file?

Retrieving information from a database by employing AngularJS with the assistance of PHP

What is the best way to define a:link style within a div class structure?

Is there a way to properly dissect or iterate through this?

How do I retrieve and display all the locally stored variables in Angular 2/JavaScript and calculate the total number of keys present in the localStorage?

Prevent outside clicks from closing the React Ant Design drawer by disabling the functionality

next.js encountered an issue with the product.map function not being recognized

Maintaining the functionality of an AJAX web page even after extended periods of inactivity

An issue has arisen where I encounter the error message: 'TypeError: callback is not a function', even though the function appears to be continuing to run successfully

Ensure you are using the appropriate .env file when constructing your next.js project

Using AJAX to submit a form to a CodeIgniter 3 controller

Using Node.js to schedule and send notifications to a specific topic via FCM

Tips for ensuring a function in Angular is only executed after the final keystroke

Exploring the vueJS canvas life cycle and transitioning between components

What is the method to retrieve the color of a linearGradient in an SVG at a particular

When switching from page 1 to page 2 in a React MUI Data table, the cell data does not update to reflect the API response

Utilize $.ajax to gracefully wait for completion without causing the UI to freeze

How can we eliminate identical elements from an array in JavaScript and increment the count of other objects?

Serializing intricate objects using JavaScript