Changing img src with React Hook that has a set onClick event

user_13188500 0
Viewed 4585

I've tried a variety of ways to fix this problem but can't seem to find a solution. Long story cut short, this is a hacky way of creating a dark mode toggle on my React app.

Essentially, I'd like the image src to change when the onClick event occurs. I've tried to add another function to the onClick but React throws an error about an infinite loop.

const App = () => {
  const [lightMode, setLightMode ] = React.useState(false)

  return (
    <Router>
      <div className={lightMode ? "light-mode" : "dark-mode"}>

        <Container>
            <Navbar.Brand className={lightMode ? "light-mode" : "dark-mode"} href="/">Built By Dan.</Navbar.Brand>

            <img
              className="mode-switch ml-auto"
              onClick={() => setLightMode(prevMode => !prevMode)}
              src="/media/bolt.png" 
              alt="lightning-bolt" 
              height="30px"
            />

        </Container>
    </Router>

I am unsure as to how to change the source. I've tried SCSS and a ternary operator but nothing seems to work.

Any help would be greatly appreciated here. All I would like to do is change the image when someone clicks the image and it toggles between colour schemes.

Thank you in advance!

react-hooks reactjs dom-events javascript
1 Answers

Use a ternary on the image src to swap between both source urls.

<img
  className="mode-switch ml-auto"
  onClick={() => setLightMode(prevMode => !prevMode)}
  src={lightMode ? "/path/to/img1" : "path/to/img2"}
  alt="lightning-bolt"
  height="30px"
/>

Edit summer-fog-1h870

user_86908570
Related