How to implement previous and next Buttons in React?

Question

I'm trying to build an app in React that will render interview questions from HTML, CSS, JS and React. I've set up a data.js file that is an array with objects inside that hold the Id, language, question and answer.

I've set up buttons for PreviousQuestion, NextQuestion and RandomQuestion.

I'm having trouble writing code for the PreviousQuestion, NextQuestion button. I've tried the following code on both but it doesn't work properly:

    const questions = data.map((item) => item.question);
    
    
    class App extends React.Component {
      state = {
        question: "",
        count: 0,
      };
    
    prevQuestion = () => {
        this.setState({
          count: this.state.count - 1,
          question: questions[this.state.count]
        });
       
      };
    
      nextQuestion = () => {
        this.setState({
          count: this.state.count + 1,
          question: questions[this.state.count]
        });

I press nextQuestion this.state.count is 0 then 1 then 2 and then I press PrevQuestion and this.state.count goes to 3 and only then back to 2 1 ...

Can anyone point me in the right direction on how to solve this so it always increments and decrements properly please?

Don't put the question in the state, only use the count in the render function to retrieve the correct question from the array. — Emile Bergeron, Aug 24 '20 at 18:02
`count: this.state.count - 1` doesn't immediately update the state value, so on the next line `this.state.count` is still the old value. The effect of this is that `question` is always one step behind. But I agree that it shouldn't be in state at all. — Brian Thompson, Aug 24 '20 at 18:03

Anis R. · Answer 1 · 2020-08-24T18:10:29.740

The issue is that inside setState, your state has not changed yet. So in questions[this.state.count], this.state.count still reflects the old value, not the new one.

Therefore, this should fix your issue with prevQuestion:

  prevQuestion = () => {
    this.setState({
      count: this.state.count - 1,
      question: questions[this.state.count - 1]
    });
   
  };

And similarly for nextQuestion.

However, as Emile Bergeron stated in the comments, it would be better to only keep track of the count (i.e. the question index) in the state, and not the question itself. You can always access the relevant question using questions[this.state.count], saving you some headaches.

score 1 · Answer 2 · answered Aug 24 '20 at 18:11

1

Use prevState in setState like the following one.

prevQuestion = () => {
     this.setState(prevState => ({
      count: prevState.count -1
      question: questions[prevState.count -1]
    }));
}

answered Aug 24 '20 at 18:11

Zahid Hasan

527
4
11

Using `prevState` isn't the part of your answer that helps, its the `questions[prevState.count -1]` part. – Brian Thompson Aug 24 '20 at 18:39

score 0 · Accepted Answer · answered Aug 24 '20 at 18:30

What's happening is that setState does not update the component state immediately, instead essentially queueing a state transition. See this answer. The answers / comments there also mention that you can use some component lifecycle methods such as componentDidUpdate to do something once a state transition has completed.

As others mentioned, you could update the question index by also adding / subtracting 1 from the state.count. Or, since I also don't think it's necessary to track the current question in the component's state, you could just refer to the question object in the render method:

const questions = data.map(item => item.question);

class Component extends Component {
  constructor () {
    super();

    this.state = {
      count: 0
    }
  }

  nextQuestion () {
    this.setState({ count: this.state.count + 1 });
  }

  previousQuestion () {
    this.setState({ count: this.state.count - 1 });
  }

  render () {
    // Get the question object based on the count in the component state
    const question = questions[this.state.count];

    return (
      <!-- Stuff here -->
      <p>{question}</p>
    );
  }
}

Its not caused by `setState` not updating immediately. Because even if it did, it wouldn't work in this case. They are still building out the object to pass to `setState`, and are expecting the assignment of an object key to effect the variable that was used to assign it. — Brian Thompson, Aug 24 '20 at 18:39

How to implement previous and next Buttons in React?

3 Answers3