How do i change the background image of a div element using a js file in a react component?-CodePudding

Okay , so iv been stuck on this for a few hours now and have tried everything i could think of / read up on. In my project i have 3 buttons, each button should change the background image of my site. the background image is tied to the default "App" div element in a react project. I am trying to write javascript code that changes the image based on what color is clicked ( the background image is a scooter, only the scooter color is what is intended to change, its not just a blank color covering the background)

Here is my javascript file to change the colors

document.getElementById("green").addEventListener(onclick, changeColorGreen);
document.getElementById("black").addEventListener(onclick, changeColorBlack);
document.getElementById("silver").addEventListener(onclick, changeColorSilver);

let greenurl = "url('../images/GreenScooter')"
let blackurl = "url('../images/GreenScooter')"
let silverurl = "url('../images/GreenScooter')"

export function changeColorGreen() {
  document.getElementById("App").style.backgroundImage = greenurl;
}
export function changeColorSilver() {
  document.getElementById("App").style.backgroundImage = silverurl;
}
export function changeColorBlack() {
  document.getElementById("App").style.backgroundImage = blackurl;
}

and this is my JSX component, well the part that pertains to this anyway:

import { changeColorBlack, changeColorGreen, changeColorSilver } from "./colorSelector";

          <div className="d-flex mx-auto pt-5" id="colorselector">
            <button type="button"  onClick={changeColorGreen} id="green"></button>
            <button type="button"  onClick={changeColorBlack} id="black"></button>
            <button type="button"  onClick={changeColorSilver} id="silver"></button>
          </div>
        </div>

i have tried all the different ways suggested via various stackOverFlow threads, youtube and google. Most of them suggested putting the URL in a variable but it still doesnt work. I tested the code and changed it so that it changes the entire background to the 3 different colors and not images and it works just fine. However trying to get it to change to the different images just wont work. Any help or guidance on the matter would be greatly appreciated thank you

CodePudding user response：

As @Evert commented, ReactJs things work much better if you use the "ReactJS Way of Thinking".

ReactJS is all about state. If something changes in any way and this change makes the appearance/behavior of your application change, this must be expressed as a state.

In you specific case, changing the background of a div element according to the buttons clicked, the background is your state.

Let's consider, for simplicity, we just need to change the background color.

import { useState } from "react";

function App() {

  const [color, setColor] = useState('yellow');

  return (
    <div>
      <div style={{backgroundColor: `${color}`}}>
        {color}
      </div>
      <div>
        <button onClick={() => setColor('green')}>Green</button>
        <button onClick={() => setColor('red')}>Red</button>
        <button onClick={() => setColor('yellow')}>Yellow</button>
      </div>
    </div>
  );
}

export default App;

This code would work fine. It expresses the color as a state with

const [color, setColor] = useState('yellow');

Now see this button

<button onClick={() => setColor('green')}>Green</button>

When you click it, the onClick event triggers and change the state, setting the color to 'green'. When the state changes, the component is rerendered and the background-color is set to green.

Now let's see how to do the same with a background-image. My prefered way is using classes.

App.css

.image-green {
  background-image: url("./img-green.png");
}

.image-red {
  background-image: url("./img-red.png");
}

.image-yellow {
  background-image: url("./img-yellow.png");
}

App.js

import { useState } from "react";

import "./App.css";

function App() {

  const [color, setColor] = useState('green');

  return (
    <div>
      <div class={`image-${color}`} style={{ width: "100px", height: "100px"}}></div>
      <div>
        <button onClick={() => setColor('green')}>Green</button>
        <button onClick={() => setColor('red')}>Red</button>
        <button onClick={() => setColor('yellow')}>Yellow</button>
      </div>
    </div>
  );
}

export default App;

Here again, when a button is clicked, the state changes and the component is re-rendered, with the correct background image.

Just don't forget two point:

In the setState(), put your desired initial state. In my case I opted for starting with the green image.
Put the images used in the appropriate directory. In my case I used these three images in the src/ directory, but you may opt for other solutions.

I also gave some width and height to the div, to make images appear.

If you want to test, just create a ReactJS app using create-react-app, replace the contents of App.js and App.css with the contents above and run it.

Hope it helps!