Как сделать toogle кнопок?

Question

[campus1]

Всем привет. Есть у меня задача сделать переключатель контента внутри компоненты, с помощью нажатия на кнопки Next / Prev. Я написал для этого ф-цию changeContent (увидеть ее вы сможете по ссылке ниже). На onClick у меня вызывается ф-ция changeContent. В той ф-ции происходит след:

• Берутся все данные (массив) с редакс стора
  
• Ищется индекс нашего элемента в массиве, который мы получили выше.
  
• Если action next то берем +1 если prev то -1
  
• Достаем новый элемент по полученому индексу
  
• И обновляем url
  

В компонента у меня стоит lifecycle method componentDidUpdate

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

isBlockNavButtons отвечает за логику disable для тех кнопок. То есть если у нас элемент последний или первый, то мы блочим нужную нам кнопку.

Теперь вопрос: Допустим я на элементе под индексом 1. Нажал changeContent("prev"), данные индекса 0 подтянулись, кнопка Prev заблочена, все как нужно. Но теперь когда я нажимаю на next, у меня данные меняются, но prev кнопка так и остается disabled.

Где мне прописать логику для этого и как, а то я что туплю немного((

Код на GIST
Код на JSFIDDLE

Answer 1

[0xD34F]

isBlockNavButtons отвечает за логику disable для тех кнопок. То есть если у нас элемент последний или первый, то мы блочим нужную нам кнопку.

А почему эта функция работает только в одну сторону - на блокировку? Пусть и обратную операцию тоже выполняет. Кроме того, работает она некорректно, если элемент всего один - в этом случае надо блокировать обе кнопки, но поскольку условия блокировки у вас зависимы, блокируется только одна.

В общем, я бы заменил if-else на что-то такое:

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

Comments

[campus1]

Здравствуйте!
Спасибо за ответ.

роме того, работает она некорректно, если элемент всего один - в этом случае надо блокировать обе кнопки,

Воу, вот тут я не подумал, спасибо, допишу логики.

P.S А в общем как вам код, нормальный или гов*окод?

[0xD34F]

campus1, в общем - нормально. Код читаемый, понять что происходит было нетрудно, несмотря на то, что показаны были какие-то огрызки вместо полной картины.

[campus1]

0xD34F, Спасибо вам большое за ответ. Удачи)