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

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!