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

How to mark if question is complete vs incomplete based on the page index – Javascript

I have a form with 11 questions. Im trying to build a progress bar that updates an array of objects for each question and flags whether its complete or incomplete. I only want it to be complete if they click next. If they click back it should mark as incomplete. For example: If i’m on question 1, it should be incomplete, when I go to question 2 it becomes complete and so on. Same thing for going back. If im on question 3 it should be incomplete, if I go back to question 2, question 2 should mark as incomplete.

My code kinda works although for some reason if I click next, next, back I have to click back twice for it to properly update.

here is the code:

   const [currentPage, setCurrentPage] = useState(0);

    const [progress, setProgress] = useState([
        { pageIndex: 0, completed: false },
        { pageIndex: 1, completed: false },
        { pageIndex: 2, completed: false },
        { pageIndex: 3, completed: false },
        { pageIndex: 4, completed: false },
        { pageIndex: 5, completed: false },
        { pageIndex: 6, completed: false },
        { pageIndex: 7, completed: false },
        { pageIndex: 8, completed: false },
        { pageIndex: 9, completed: false },
        { pageIndex: 10, completed: false },
    ]);

    const handleNavButtonNext = () => {
        // Mark previous page as complete
        const newProgress = [...progress];
        newProgress[currentPage].completed = true;
        setProgress(newProgress);

        // Move to next page
        setCurrentPage(currentPage + 1);

    };
    const handleNavButtonBack = () => {
        // Mark current page as incomplete
        const newProgress = [...progress];
        newProgress[currentPage].completed = false;
        setProgress(newProgress);

        // Move to previous page
        setCurrentPage(currentPage - 1);

    };

What am I doing wrong?

Tags:

3

Answers


  1. 0

    try changing the following

    setCurrentPage(currentPage + 1)

    to

    setCurrentPage((page) => page + 1)
    Login or Signup to reply.
  2. 0

    When you press the back button, you make the current question incomplete, but you have to do the previous question as well.

    const [currentPage, setCurrentPage] = useState(0);

const [progress, setProgress] = useState([
    { pageIndex: 0, completed: false },
    { pageIndex: 1, completed: false },
    { pageIndex: 2, completed: false },
    { pageIndex: 3, completed: false },
    { pageIndex: 4, completed: false },
    { pageIndex: 5, completed: false },
    { pageIndex: 6, completed: false },
    { pageIndex: 7, completed: false },
    { pageIndex: 8, completed: false },
    { pageIndex: 9, completed: false },
    { pageIndex: 10, completed: false },
]);

const handleNavButtonNext = () => {
    // Mark previous page as complete
    const newProgress = [...progress];
    newProgress[currentPage].completed = true;
    setProgress(newProgress);

    // Move to next page
    setCurrentPage(currentPage + 1);

};
const handleNavButtonBack = () => {
    // Mark current page as incomplete
    const newProgress = [...progress];
    newProgress[currentPage].completed = false;
    newProgress[currentPage-1].completed = false; //this was missing in your code.
    setProgress(newProgress);

    // Move to previous page
    setCurrentPage(currentPage - 1);
}
    Login or Signup to reply.
  3. 0

    If think you should have the += operator in setCurrentPage

     setCurrentPage(currentPage += 1);

    the same in the setCurrentPage -=

    setCurrentPage(currentPage -= 1);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search