How to make toogle buttons?

Question

React

Hello. I have a task to make a content switch inside the component by clicking on the Next / Prev buttons. I wrote a changeContent function for this (you can see it at the link below). On onClick, the changeContent function is called for me. In that function, the following occurs:

• All data (array) is taken from the redax store
  
• We are looking for the index of our element in the array, which we received above.
  
• If action next then take +1 if prev then -1
  
• We get a new element at the received index
  
• And update the url
  

I have a lifecycle method in the componentcomponentDidUpdate

componentDidUpdate(prevProps) {
    const {
      isBlockNavButtons,
      params: { id }
    } = this.props;
    if (this.props.location !== prevProps.location) {
      isBlockNavButtons(null, id, "diagnosis");
      getQuestionById("diagnostics", "createQuestion", id);
    }
  }

isBlockNavButtonsis responsible for the disable logic for those buttons. That is, if we have the last or first element, then we block the button we need.
Now the question is: Let's say I'm on the element at index 1. I pressed changeContent("prev"), the data at index 0 is pulled up, the Prev button is blocked, everything is as it should be. But now when I click on next, my data changes, but the prev button remains the same disabled.
Where can I write the logic for this and how, otherwise I’m a little dumb ((
Code for GIST
Code forJSFIDDLE

Answer 1

isBlockNavButtonsis responsible for the disable logic for those buttons. That is, if we have the last or first element, then we block the button we need.

And why does this function work only in one direction - for blocking? Let the reverse operation also perform. In addition, it does not work correctly if there is only one element - in this case, both buttons must be blocked, but since the blocking conditions are dependent on you, only one is blocked.
In general, I would replace if-else with something like this:

dispatch({
  type: `${CREATE_QUESTION}_BLOCK_BUTTON`,
  payload: {
    blockPreviousButton: elementIndex === 0,
    blockNextButton: elementIndex === data.length - 1
  }
});