@PHPjedi

Как найти индекс элемента массива, удовлетворяющего определённому условию?

У меню есть две кнопки, первая - следующая страница, а вторая - предыдущая.

Хочу написать проверку, для этого у меня есть вот такой массив:

export default [
    {
        id: '1',
        title: 'Главная',
        link: '/'
    },
    {
        id: '2',
        title: 'О нас',
        link: '/about'
    },
    {
        id: '3',
        title: 'Контакты',
        link: '/contacts'
    },
];

Я хочу проверять location.pathname следующим образом:

Если location.pathname == /, получаю индекс (или id), и если это минимальное число, то предыдущей страницы не должно быть. То же самое с последней страницей.

Это что-то вроде пагинации.

Как реализовать поиск по объекту, и каком образом получить индекс из массива объектов?
  • Вопрос задан
  • 150 просмотров
Решения вопроса 2
Stalker_RED
@Stalker_RED
let foo = data.findIndex(item => item.link === location.pathname)
https://developer.mozilla.org/ru/docs/Web/JavaScri...

Ответ написан
0xD34F
@0xD34F Куратор тега React
Это что-то вроде пагинации.

Очень странно, но допустим:

const currPathIndex = paths.findIndex(n => n.link === location.pathname);
const isPrev = currPathIndex !== 0;
const isNext = currPathIndex !== paths.length - 1;

Дальше можно отключать кнопки:

const onClick = e =>
  history.push(paths[currPathIndex + +e.target.dataset.step].link);

<button disabled={!isPrev} data-step={-1} onClick={onClick}>PREV</button>
<button disabled={!isNext} data-step={+1} onClick={onClick}>NEXT</button>

Или не рендерить ссылки:

{isPrev && <NavLink to={paths[currPathIndex - 1].link}>PREV</NavLink>}
{isNext && <NavLink to={paths[currPathIndex + 1].link}>NEXT</NavLink>}

https://jsfiddle.net/ev93d8fj/1/
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы