CODEWITHSUNDEEP
javascriptreactjs
gerypratama
gerypratama

Reputation: 43

ReactJS component state change rendered but then immediately revert back to initial state

I've just started learning frontend development using React following this tutorial. All is well until I've come to the props & state learning section.

In this section, I was supposed to build a meme generator page. Everything went well, I followed as instructed by the tutorial. However, when I clicked the button to change the meme image, it didn't worked. The image stayed the same as the initial image (with initial image URL value/state), even though my code didn't differ so much from what I've seen in the tutorial.

Here's my code for my meme generator component:

import React from 'react'
import './style.css'
import memesData from "./constants/MemeDB"

function Meme() {

    const [meme, setMeme] = React.useState({
        topText: "",
        bottomText: "",
        randomImage: "https://i.imgflip.com/30b1gx.jpg",
        imageAlt: "Drake Hotline Bling"
    })

    const [allMemeImage, setAllMemeImage] = React.useState(memesData)
    
    function getNewMeme() {
        const memesArray = allMemeImage.data.memes
        const randomNumber = Math.floor(Math.random() * memesArray.length)
        const url = memesArray[randomNumber].url
        const name = memesArray[randomNumber].name
        setMeme(prevMeme => ({
            ...prevMeme,
            randomImage: url,
            imageAlt: name
        }))
    }

    return (
        <main>
            <form className='form'>
                <input
                    type="text"
                    className='form--input'
                    placeholder='Top text'
                />
                <input
                    type="text"
                    className='form--input'
                    placeholder='Bottom text'
                />
                <button onClick={getNewMeme} className='form--button'>Get a new meme image 🖼</button>
            </form>
            <img src={meme.randomImage} alt={meme.imageAlt} className='meme-image' />
        </main>
    )
}


export default Meme

For additional information, I build the page locally using Microsoft VSCode, instead of Scrimba, through the npx create-react-app command.

I tried to add console.log(randomNumber) and console.log(url) inside the getNewMeme function to make sure if the values changed if I clicked the button. Then, I've found out that those values actually changed. However, each time I clicked the button, the values of the randomNumber and the url are only displayed on the console for a split second before the console automatically was cleared again. Also sometimes, on the page, when I clicked the button, I could see a glimpse of the meme image changed before reverted back to the initial image/state. What is the problem here?

I'm sorry if I couldn't describe the problem correctly.

Upvotes: 1

Views: 126

Answers (1)

Son Nguyen
Son Nguyen

Reputation: 1777

The problem is that, you are refreshing the page after each button click. To fix this:

function getNewMeme(event) { // <--- Accept the `event` parameter here
  event.preventDefault(); // <--- Prevent the default behavior of form submission, which is refreshing the page
  const memesArray = allMemeImage.data.memes;
  const randomNumber = Math.floor(Math.random() * memesArray.length);
  const url = memesArray[randomNumber].url;
  const name = memesArray[randomNumber].name;
  setMeme((prevMeme) => ({
    ...prevMeme,
    randomImage: url,
    imageAlt: name,
  }));
}

How? This is not related to React, but rather HTML. By default, a <button> has the type submit, and if placed inside a form, it will automatically submit the form when clicked. Again by default, form submission will cause the page to reload. We want to prevent this behavior.

Reference:

Upvotes: 1

Related Questions