Главное что хочу - обойтись одним контейнером у карточек
const result = unique(arr, n => n.user.id);
.const unique = (arr, key) =>
Object.values(Object.fromEntries(arr.map(n => [ key(n), n ])));
// или, если в результирующий массив должны попадать те из "одинаковых" элементов,
// что расположены в исходном массиве первыми
const unique = (arr, key) =>
Object.values(arr.reduce((acc, n) => (acc[key(n)] ??= n, acc), {}));
// или, если надо также сохранять взаимное расположение элементов
const unique = (arr, key) =>
arr.filter(function(n) {
const k = key(n);
return !(this[k] = this.hasOwnProperty(k));
}, {});
Map
и Set
:const unique = (arr, key) =>
Array.from(new Map(arr.map(n => [ key(n), n ])), n => n[1]);
// или (в отличие от объекта, Map запоминает порядок вставки,
// так что тут взаимное расположение элементов сохраняется)
const unique = (arr, key) =>
[...arr.reduce((acc, n) => {
const k = key(n);
return acc.set(k, acc.get(k) ?? n);
}, new Map).values()];
// или
const unique = (arr, key) =>
arr.filter(function(n) {
const k = key(n);
return !this.has(k) && this.add(k);
}, new Set);
const chunks = (arr, chunkSize) => Array.from(
{ length: Math.ceil(items.length / chunkSize) },
(n, i) => items.slice(i * chunkSize, (i + 1) * chunkSize)
);
const Card = props => (
<div className="style-review__slide-row">
<a className="style-card style-review__style-card" href="#">
<div className="style-card__overlay">
<div className="style-card__title">{props.title}</div>
<div className="style-card__category">
{props.category}
</div>
</div>
</a>
</div>
);
const chunkedItems = chunks(items, 3);
<Swiper>
{chunkedItems.map(cardItems => (
<SwiperSlide className="swiper-slide style-review__slide">
{cardItems.map(n => <Card {...n} />)}
</SwiperSlide>
))}
</Swiper>
() =>
перед openLightboxOnSlide(key)
(кстати, а какого хрена переменная, содержащая индекс, названа key?).null
, или -1
) - это будет означать, что показывать ничего не надо:const [ lightIndex, setLightIndex ] = useState(null);
<img onClick={() => setLightIndex(key)} />
<ReactBnbGallery
photos={photos}
show={lightIndex !== null}
activePhotoIndex={lightIndex}
onClose={() => setLightIndex(null)}
/>
mixin logo(className)
img.logo(src="img/logo.png", class= className)
+logo()
+logo('header__logo')
for (let i = 0; i < 50; ...
0
и < 50
, чтобы это исправить.out += i + ' '; // добавляется всегда, в любом случае
if ( i % 2 != 0) continue; // проверка уже потом
поменяйте порядок: сначала проверка, потом добавлениеdocument.querySelector('.out-2').innerHTML = out;
document.querySelector('.b-2').addEventListener('click', () => {
document.querySelector('.out-2').innerText = Array(25) // создали массив из 25 пустых слотов
.fill() // заполнили их undefined, чтобы можно было..
.map((n, i) => 2 * (i + 1)) // каждый заменить на (его индекс + 1) * 2
.join(' '); // и склеить в строку через пробел
})
все эти методы массива можно посмотреть на MDN.