useState does not set

First of all, yes, I talked with ChatGPT, it does not give a working answer. The main is that I want an image to be rendered. Why in my case the setter does not work?

Probably the error lies on the surface, I am a newbie so please do not be strict.

I am trying to set setMeme in two places, but it does not work. What's horroring for me is that I do not receive any error.

I screened a few sites, but solutions mostly rely on "useEffect", and did not help

this did not help:

The useState set method is not reflecting a change immediately

import React from "react"; import memesData from "../memesData.js"; import { useState, useEffect } from "react"; import front_img from "../../public/images/front_meme.png";

function importAll(r) {
    return r.keys().map(r);   }
     const images = importAll(require.context('./', false, /\.(png|jpe?g|svg)$/)); //alert(images); // Create a require.context for the images folder //const imagesContext = require.context("../images", true);

export default function Meme() {
    const [memeImg, setMeme] = useState("");
    const [word , setWord] = useState("");
    //setWord("dfb")
    //alert(word);

    const getMemeImage = async () => {
      const memesArray = memesData.data.memes;
      const randomNumber = Math.floor(Math.random() * memesArray.length);
      const selectedMeme = memesArray[randomNumber];
    
      setMeme("svsdsd");
      // No console.log here
      if (selectedMeme && selectedMeme.url) {
        setMeme(selectedMeme.url);
      }
      
    };

useEffect(() => {
            console.log("Meme Image:", memeImg);
          }, [memeImg]);
    
     // Add memeImg as a dependency for 

     return (
    <div>
      <form className="form">
        <input type="text" className="form--input" />
        <input type="text" className="form--input" />
        <button onClick={getMemeImage} className="form-button">
          Get a new meme image
        </button>
      </form>
      <img className="meme--image" src={front_img} alt="" />
      
        <img
          className="meme--image"
          src={memeImg}
          // imagesContext(`./${memeImage}`).default 
          alt=""
        />
      
    </div>   ); }

memesData.js

const memesData = {
success: true,
data: {
    memes: [
        {
            id: "3242213",
            name: "Good Meme 1",
            url: "./Portfolio/meme_generator/public/images/good_meme_1.png",
            width: 350,
            height: 400,
            box_count: 3,
        },
        {
            id: "3224",
            name: "Good Meme 2",
            url: "./Portfolio/meme_generator/public/images/good_meme_2.png",
            width: 400,
            height: 300,
            box_count: 2,
        },
        {
            id: "234213",
            name: "Good meme 3",
            url: "./Portfolio/meme_generator/public/images/good_meme_3.png",
            width: 300,
            height: 400,
            box_count: 3,
        },
        { 
            id: "5672213",
            name: "Good meme 4",
            url: "./Portfolio/meme_generator/public/images/good_meme_4.png",
            width: 500,
            height: 400,
            box_count: 3,
        },
        {
            id: "456415",
            name: "Good meme 5",
            url: "./Portfolio/meme_generator/public/images/good_meme_5.png",
            width: 200,
            height: 500,
            box_count: 5,
        },
        {
            id: "38654673",
            name: "Good meme 6",
            url: "./Portfolio/meme_generator/public/images/good_meme_6.png",
            width: 400,
            height: 350,
            box_count: 7,
        },
        {},
    ]
}

} export default memesData;

Via Active questions tagged javascript - Stack Overflow https://ift.tt/kWd9sbQ