Для доступа к видео оформите подписку на курс

6. Пагинация: next/prev, состояние и disable кнопок

Реализуем постраничный вывод: хранение info, кнопки «Назад/Вперед», запросы на next/prev. Отрефакторим загрузку в fetchData и отключим кнопки, когда страниц нет.

Оценить качество материала и подачу материала автором видео:

Front-end

Трудоустройтесь middle front-end разработчиком на React JS (TypeScript) за 12-16 месяцев обучения с ежедневной менторской поддержкой в формате видео 1 на 1 и коммерческими проектами в портфолио

Перейти на курс

Back-end

Трудоустройтесь middle back-end разработчиком за 12-16 месяцев обучения с ежедневной менторской поддержкой в формате видео 1 на 1 и коммерческими проектами в портфолио

Перейти на курс

Карьерный бустер

Получите коммерческий опыт на реальных стартапах, прокачайте tech & soft навыки, научитесь работать в команде, проходить собеседования и получите первую работу в IT!

Перейти на курс

Основы Front-end

Сделайте первый шаг в IT, освоив базовые знания разработки и научившись создавать небольшие проекты на JavaScript

Перейти на курс

Основы Back-end

Сделайте первый шаг в IT, освоив базовые знания разработки. Без опыта. Без математики. Только практика: JavaScript, SQL, Node JS, база данных

Перейти на курс

6. Пагинация

Реализация пагинации

По умолчанию с сервера к нам приходит 20 персонажей, но всего их 826.

Чтобы понять, как получить других персонажей, давайте обратимся к документации

tsx

"info": {
    "count": 826,
    "pages": 42,
    "next": "https://rickandmortyapi.com/api/character/?page=20",
    "prev": "https://rickandmortyapi.com/api/character/?page=18"
  },
  "results": [/*...*/]

Если говорить простыми словами, то сервер с каждым запросом возвращает ссылку на предыдущую и следующую страницу.

Для реализации пагинации (постраничного вывода) сделаем следующее:

...

Для доступа к полной версии конспекта оформите подписку на курс