Question 211000 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – 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 useEffect

     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>   ); }
Tags:

4

Answers


  1. 0

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

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
  3. 0 
    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]);
 };
    Login or Signup to reply.
  4. 0 
    const getMemeImage = async () => {
  const memesArray = memesData.data.memes;
  const randomNumber = Math.floor(Math.random() * memesArray.length);
  const selectedMeme = memesArray[randomNumber];
    
  if (selectedMeme && selectedMeme.url) {
    setMeme(selectedMeme.url);
  }
};

    use useEffect outside of function (react hook only works at the top level of component):

    useEffect(() => {
  console.log("Meme Image:", memeImg);
}, [memeImg?.url]);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search