Switching pictures with onClick in React

September 7, 2022

I’m trying to switch between pictures every time I click on the button, any idea what’s wrong with my code.

import "./App.css";
import { useState } from "react";

function App() {
  const [picture, setPicture] = useState();

  const ChangePicture = () => {
    setPicture([
      "http://www.clker.com/cliparts/n/8/K/L/T/C/number-1-md.png",
      "https://image.shutterstock.com/image-vector/number-2-icon-vector-illustration-600w-549182386.jpg"
    ]);
  };

  return (
    <div className="App">
      <img src={picture} />
      <button onClick={ChangePicture}>Change Picture</button>
    </div>
  );
}

export default App;

>Solution :

If you store image urls into an array, you can toggle between and display the image corresponding to the selected index:

import './App.css';
import { useState } from 'react';

const pictures = [
  'http://link.com/image1.png',
  'http://link.com/image2.png',
];

function App() {
  const [pictureIdx, setPictureIdx] = useState(0);

  const changePicture = () => {
    setPictureIdx((prevIdx) => {
      return (prevIdx + 1) % pictures.length;
    });
  };

  return (
    <div className='App'>
      <img src={pictures[pictureIdx]} />
      <button onClick={() => changePicture}>Change Picture</button>
    </div>
  );
}

export default App;