useState does not set

Question

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;

samran feli's answer helped, so the image starts to load. So I at least started getting an error in the console when I click,

The error is:

good_meme_2.png:1     GET http://localhost:3000//public/images/good_meme_2.png 404 (Not Found)

console.log runs before setting the state – Naveen Nizam Jul 19 '23 at 07:00 — Naveen Nizam, Jul 19 '23 at 07:00

score 1 · Answer 1 · answered Jul 19 '23 at 06:55

1

Hooks need to be at the top level of a component, or within another hook. You've Put yours within a callback.

answered Jul 19 '23 at 06:55

Vivick

3,434
2
12
25

took your note, accoriding to samran felis answer nothing worked – Александр Романеев Jul 19 '23 at 07:47

score 0 · Answer 2 · answered Jul 19 '23 at 07:13

you used useeffect hook inside a callback function which is getMemeImage it will not work properly. move useeffect outside getMemeImage function.

if you see the console log in useeffect is showing the updated data and image is still not showing the try to give some static width and height to the image

score 0 · Answer 3 · answered Jul 19 '23 at 07:18

setMeme("svsdsd");
// No console.log here
if (selectedMeme && selectedMeme.url) {
setMeme(selectedMeme.url)};
  }

You are setting the meme outside the hook, which will run only once, what you can is add this logic inside the useEffect with selectedMeme as dependency array, so whenever the selectedMeme changes the setMeme will be setted.

 useEffect(() => {
   if (selectedMeme && selectedMeme.url) {
      setMeme(selectedMeme.url);
   }
  }, [selectedMeme]);
 };

Tried you approach, the "memeImg" variable still does not set — Александр Романеев, Jul 19 '23 at 07:40

score 0 · Answer 4 · edited Jul 24 '23 at 18:32

0

you should export your data in memesData.js (and closing "{" is missed):

export const memesData = {
    // ...
};

and import it so:

import {memesData} from "../memesData.js";

getMemeImage:

const memesArray = memesData?.data.memes;
const randomNumber = Math.floor(Math.random() * memesArray.length);
const selectedMeme = memesArray[randomNumber];
if (selectedMeme && selectedMeme.url) {
    setMeme(selectedMeme.url);
}

your button should have type="button" to prevent form submits and page reloads:

<button type="button" onClick={getMemeImage} className="form-button">
    Get a new meme image
</button>

edited Jul 24 '23 at 18:32

Federico Fusco

545
1
5
18

answered Jul 19 '23 at 07:37

samran feli

86
5

I just copy pasted, no changes, the src attribute do not set – Александр Романеев Jul 19 '23 at 07:44
can I have a look at memesData.js? – samran feli Jul 19 '23 at 08:06
I added the code – Александр Романеев Jul 19 '23 at 09:13
I updated my answer. I hope it would help you. – samran feli Jul 19 '23 at 10:22
The first point is not necessary, but I checked to be safe, Nobody still gave me the answer, the 3rd point changed the situation, so now I am getting another error, the image started to load, but //////// GET http://localhost:3000//public/images/good_meme_2.png 404 (Not Found) ////// the request breaks – Александр Романеев Jul 19 '23 at 11:08

score 0 · Answer 5 · answered Jul 19 '23 at 08:07

0

Hooks shouldn't be used in nested scope !!!

answered Jul 19 '23 at 08:07

Gevorg Martirosyan

39
1
7

useState does not set

5 Answers5