Question 189845 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Why is my React state not updating as expected?

When I click on the NextButton I want to increment the value of the page state which is set to default at 0. In the header, I want to show value in the FormTitles array at index of page.

Currently, it increments for a second then instantly reverts back to the default value as can be seen in the GIF.

What is causing this issue?

import styled from "styled-components"
import { useState } from "react";
function Form() {

  const [page, setPage] = useState(0);
  const FormTitles = [
    "1", 
    "2",
    "3",
    "4",
    "5",
    "6",
    "7",
  ]

  const handlePageIncrement = () => {
    setPage((currPage) => currPage + 1)
  }

  
  return (
    <FormWrapperOuter>
        <ProgressBar></ProgressBar>
        <FormWrapperInner>
        <Header><h1>{FormTitles[page]}</h1></Header>
        <Body></Body>
        <Footer>
            <PrevButton>Back</PrevButton>
            <NextButton onClick={handlePageIncrement}>Next</NextButton>
        </Footer>
        </FormWrapperInner>
    </FormWrapperOuter>
  )
}
Tags:

2

Answers


  1. 0

    The reason why the page value is reverting back to the default value is because you are using the useState hook to set the initial value of the page state variable to 0. The useState hook is an asynchronous hook, which means that the state variable will not be updated immediately when you call the setPage function. Instead, the state variable will be updated after the next render cycle.

    To fix this, you can use the useEffect hook to update the state variable immediately after the setPage function is called. The useEffect hook is a synchronous hook, which means that the code inside the useEffect function will be executed immediately after the component is rendered.

    Here is the code for the useEffect hook:

    useEffect(() => {
  setPage((currPage) => currPage + 1)
}, [page])

    The useEffect hook takes two arguments: a function and an array. The function is executed whenever any of the values in the array change. In this case, the function is executed whenever the value of the page state variable changes.

    The useEffect hook is a powerful tool that can be used to update the state of a component immediately after a value changes. In this case, we are using the useEffect hook to update the value of the page state variable immediately after the setPage function is called.

    Here is the complete code for the Form component:

    import { useState, useEffect } from "react";

const Form = () => {

  const [page, setPage] = useState(0);
  const FormTitles = [
    "1", 
    "2",
    "3",
    "4",
    "5",
    "6",
    "7",
  ]

  const handlePageIncrement = () => {
    setPage((currPage) => currPage + 1)
  }

  useEffect(() => {
    setPage((currPage) => currPage + 1)
  }, [page])

  return (
    <div>
        <ProgressBar></ProgressBar>
        <div>
        <Header><h1>{FormTitles[page]}</h1></Header>
        <Body></Body>
        <Footer>
            <PrevButton>Back</PrevButton>
            <NextButton onClick={handlePageIncrement}>Next</NextButton>
        </Footer>
        </div>
    </div>
  )
}

    I hope this helps! Let me know if you have any other questions.

    Login or Signup to reply.
  2. 0

    This is what you can do:

    let title=FormTitles[0]
const handlePageIncrement = () => {
    title=FormTitles[page+1]
    setPage((currPage) => currPage + 1)
}

    Take a title variable that stores the value and update it when function triggers and also change this part

    <h1>{title}</h1>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search