Изменение сохраненного изображения в галерее, установив состояние ⇐ Javascript

[Anonymous]

Я строю простое приложение галереи. Я хочу иметь возможность изменить изображение основной галереи на другое изображение, когда он нажимается с использованием состояния, но у меня возникают трудности. Все изображения сохраняются непосредственно в папке SRC. В моем текущем коде, когда вы выбираете новое изображение для отображения текущего, но не изменяется на выбранную, но я не могу заставить его работать. Как ни странно, когда я передаю переменную непосредственно в параметр SRC, это работает, но не когда я делаю это с состоянием, например ,::
src={clickedImageId !== "4" ? img2 : img4}
< /code>
Это мой код. Куда я ошибаюсь? < /P>
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import { useState } from "react";
import img1 from "./img1.jpg";
import img2 from "./img2.jpg";
import img3 from "./img3.jpg";
import img4 from "./img4.jpg";

function App() {
const [clickedImageId, setClickedImageId] = useState("4");
const [galleryImg, setGalleryImg] = useState(img4);

function handleClick(e) {
setClickedImageId(e.target.id);
setGalleryImg(`img${e.target.id}`);
console.log(galleryImg, clickedImageId);

return;
}

return (



onClick={handleClick}
alt="rocks on the beach"
/>


);
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(



);


Подробнее здесь: https://stackoverflow.com/questions/797 ... ting-state