Салават Салахутдинов

fetch('https://example.com/main.json')
   .then(response => response.json())
   .then(json => {
       // console.log(json);
   })

Парсить через JSON.parse не нужно, так как он уже будет распарсен с помощью response.json()

Потому что в цикле for вы не делаете выход из цикла после того как значение было найдено(16 строчка break):
https://jsfiddle.net/ot5mjuvw/2/
Но вообще проверку ключа можно сделать и без цикла (как в ответе MagicMight)

По ссылке https://faap-app.herokuapp.com/faap/v1/rcvr_board вам возвращается объект в котором нет свойства "items", поэтому в items вы записываете undefined
Если я правильно понимаю items это как раз таки то что приходит в свойстве data, поэтому попробуйте заменить

const fetchItems = async () => {
  const data = await fetch('https://faap-app.herokuapp.com/faap/v1/rcvr_board'
  );

  const json = await data.json();
  setItems(json.data);
};

return (
    <div>
        {items && items.map(item => (
            <h1 key={item.id}>{item.subject}</h1>
        ))}
    </div>
);

Оо, это известный баг, который кстати до сих пор не пофиксили. (https://github.com/kenwheeler/slick/issues/1924). Придется вручную делать фильтрацию (перейдите по ссылке, в конце комментарий с примером реализации) Никому не советую использовать этот slick, так как он не поддерживается и баги очень долго фиксят (последний релиз в октябре 2017)
Для сложных слайдеров с фильтрацией и т.д советую Swiper (https://github.com/nolimits4web/swiper)
Пример реализации на Swiper:

<section id="portfolio" class="portfolio-slider">
    <div id="portfolio-categories-nav" class="portfolio-categories-nav">
      <button type="button" class="portfolio-categories-nav__item" data-category-id="1">Категория 1</button>
      <button type="button" class="portfolio-categories-nav__item" data-category-id="2">Категория 2</button>
      <button type="button" class="portfolio-categories-nav__item" data-category-id="3">Категория 3</button>
    </div>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <a href="" class="portfolio-slider-slide swiper-slide" data-categories="[3]">Название</a>
        <a href="" class="portfolio-slider-slide swiper-slide" data-categories="[1,3]">Название</a>
        <a href="" class="portfolio-slider-slide swiper-slide" data-categories="[2]">Название</a>
        <a href="" class="portfolio-slider-slide swiper-slide" data-categories="[2,3]">Название</a>
      </div>
    </div>
    <div class="text-right">
      <button type="button" class="portfolio-slider__prev-btn"><i class="icon-left"></i></button>
      <button type="button" class="portfolio-slider__next-btn"><i class="icon-right"></i></button>
    </div>
  </section>

import Swiper from 'swiper';
function initSwiper(containerSelector) {
  const options = {
    slidesPerView: 2,
    slidesPerColumn: 2,
    slidesPerColumnFill: 'row',
    spaceBetween: 0,
    loop: false,
    autoplay: {
      delay: 8000,
    },
    navigation: {
      nextEl: containerSelector + ' .portfolio-slider__next-btn',
      prevEl: containerSelector + ' .portfolio-slider__prev-btn',
    },
    breakpointsInverse: true,
    breakpoints: {
      768: {
        slidesPerView: 3,
        slidesPerColumn: 2,
      },
      1024: {
        slidesPerView: 4,
        slidesPerColumn: 2,
      },
    },
    threshold: 2,
  };

  return new Swiper(containerSelector + ' .swiper-container', options);
}

function initPortfolio (
  containerSelector = '#portfolio',
  itemsContainerSelector = '#portfolio .portfolio-slider'
) {
  const $categoriesButtons = $categoriesSlickContainer.find(
    '.portfolio-categories-nav__item'
  );
  const $itemsContainer = $(itemsContainerSelector);
  const itemsSwiper = initSwiper(containerSelector);
  const $items = $('.portfolio-slider-slide', containerSelector).clone();

  function activateCategoryButton($button) {
    const categoryId = $button.data('categoryId');
    $categoriesButtons.removeClass('active');
    $button.addClass('active');

    const $newSlides = $items.filter(function() {
      const categories = $(this).data('categories');
      return categories ? categories.indexOf(categoryId) !== -1 : false;
    });

    itemsSwiper.removeAllSlides();
    itemsSwiper.appendSlide($newSlides.toArray());
  }

  if ($categoriesButtons && $categoriesButtons.length) {
    activateCategoryButton($categoriesButtons.first());
    $categoriesButtons.on('click', function() {
      activateCategoryButton($(this));
    });
  }
};

initPortfolio();

Создать для каждого из слайдеров контейнеры с разными классами или id и переопределять стили селектясь на этот контейнер.
Например есть 2 слайдера:

<!-- Первый слайдер -->
<div class="primary-slider">
  <ul id="first-slider">
    <li>
        <h3>First Slide</h3>
        <p>Lorem ipsum Cupidatat quis pariatur anim.</p>
    </li>
    <li>
        <h3>Second Slide</h3>
        <p>Lorem ipsum Excepteur amet adipisicing fugiat velit nisi.</p>
    </li>
    ...
  </ul>
</div>

<!-- Второй слайдер -->
<div class="secondary-slider">
  <ul id="second-slider">
    <li>
        <h3>First Slide</h3>
        <p>Lorem ipsum Cupidatat quis pariatur anim.</p>
    </li>
    <li>
        <h3>Second Slide</h3>
        <p>Lorem ipsum Excepteur amet adipisicing fugiat velit nisi.</p>
    </li>
    ...
  </ul>
</div>

Инициализируем каждый из слайдеров

$(document).ready(function() {
  $("#first-slider").lightSlider();
  $("#second-slider").lightSlider();
});

Теперь можем переопрелить стили каждого слайдера по отдельности

// первый слайдер
.primary-slider .lSPrev {
  ...
}
.primary-slider .lSNext {
  ...
}
...

// второй слайдер
.secondary-slider .lSPrev {
  ...
}
.secondary-slider .lSNext {
  ...
}
...

JSON не может иметь одиночные кавычки, поэтому происходит ошибка при парсинге. Нужно заменить все одиночные кавычки на двойные
Например:

const json = "['1', '2', '3']";
const result = JSON.parse(json.replace(/'/g, '"'))

Через API Swiper такое невозможно, но можно сделать прогрессбар через API Swiper, а верхнее меню вручную
Допустим код вашего меню такой:

<ul class="swiper-menu">
    <li class="swiper-menu__item" data-index="0">Каталог продукции</li>
    <li class="swiper-menu__item" data-index="1">О нашей компании</li>
    <li class="swiper-menu__item" data-index="2">Контактная информация</li>
    <li class="swiper-menu__item" data-index="3">Категория</li>
 <ul>

Теперь через API Swiper меняем слайды при клике на элементы меню:

const mySwiper = new Swiper('swiper-container', {
   mode:'horizontal',
   loop: false,
   pagination: {
      el: '.swiper-pagination',
      type: 'progressbar',
      clickable: true,
   },

   navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
   },
})
$('.swiper-menu').on('click',  '.swiper-menu__item', function() {
   const index = $(this).data('index')
   mySwiper.slideTo(index)
});