Пропадают кнопки слайдера

Question

В процессе создания слайдера возникло непредвиденное: стали пропадать кнопки.
Я генерировала Нное число кружочков снизу слайда в зависимости от общего количества существующих слайдов. При сохранении кода все на странице отображается, но как только перезагружаю - ничего нет, все пропадает.
Пробовала выводить в консоль: в первом случае (при сохранении) выводится лист с нужными мне div'ами-слайдами, во втором (после обновления) - пустой NodeList.
Методом тыка обнаружила, что "точечки" возникают только в случае, если я вношу какое-то изменение в файл (даже тупо делаю новую пустую строку в коде), но потом также пропадают после обновления. Если потом решаю заново сохранить код, не поменяв ничего - ничего не меняется.

Ниже прилагаю код (компонент, в котором рендерится слайдер, и сторонняя функция, отвечающая за создание "точечек"):

import RenderStars from "../../renderStars";
import sliderDots from "../../sliderDots";

import "./products.scss";

import sweaterShort from './resources/sweater_short.jpg';
import pantsFashion from './resources/pants_fashion.jpg';
import star from '../star.svg';


const productsData = [{image: sweaterShort, rating: 5, name: "Sweater Shirt", price: "$45.99", sale: '$35.99'}, 
                        {image: pantsFashion, rating: 4, name: "Pants fashion", price: "$55", sale: '$44.99'}];

const productItem = (image, rating, name, price, sale, id) => {
    return (
        <div className="products__item" key={id}>
            <img src={image} alt={name} className="products__img"/>
            <div className="products__description">
                <div className="products__rating"><RenderStars star={star} rating={rating}/></div>
                <div className="products__item-title">{name}</div>
                <div className="products__price">
                    <div className="products__price-old">{price}</div>
                    <div className="products__price-new">{sale}</div>
                </div>
            </div>
            
        </div>
    )
}

const renderProducts = () => {
    const products = productsData.map((element, i) => {
        return (
            productItem(element.image, element.rating, element.name, element.price, element.sale, i)
        )
    })
    return (
        <div className="products__examples">{products}</div>
    )  
}

const Products = () => {
    return(
    <section className="products">
        <div className="products__wrapper">
            <div className="products__slider">
                <div className="products__content">
                    <div className="products__title title">Best Seller Product</div>
                    <div className="products__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ac neque, velit tortor quam at donec etiam bibendum sagittis. 
                    Libero tempor, lacus amet, scelerisque neque mauris odio risus nec. Nisl, parturient at morbi morbi sit arcu. At integer maecenas tortor non lectus.</div>
                    <button className="btn">See more</button>
                </div>
                {renderProducts()}
            </div>
            <div className="products__slider">
                <div className="products__content">
                    <div className="products__title title">Best Seller Product</div>
                    <div className="products__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ac neque, velit tortor quam at donec etiam bibendum sagittis. 
                    Libero tempor, lacus amet, scelerisque neque mauris odio risus nec. Nisl, parturient at morbi morbi sit arcu. At integer maecenas tortor non lectus.</div>
                    <button className="btn">See more</button>
                </div>
                {renderProducts()}
            </div>
            <div className="products__slider">
                <div className="products__content">
                    <div className="products__title title">Best Seller Product</div>
                    <div className="products__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ac neque, velit tortor quam at donec etiam bibendum sagittis. 
                    Libero tempor, lacus amet, scelerisque neque mauris odio risus nec. Nisl, parturient at morbi morbi sit arcu. At integer maecenas tortor non lectus.</div>
                    <button className="btn">See more</button>
                </div>
                {renderProducts()}
            </div>
        </div>
        {sliderDots()}
    </section>
    )
}
export default Products;

Функция, отвечающая за "точечки":

const sliderDots = () => {
        const slides = document.querySelectorAll(".products__slider");
        console.log(slides);
    
        const dotsArr = Array(slides.length).fill(0).map((idx) => idx + 1);
        const dots = dotsArr.map(() => {
            return <div className="products__dot"></div>
        })
        return <div className="products__dots">{dots}</div>
    }
    

export default sliderDots;

Буду безумно благодарна, если кто-то поможет понять, в чем проблема.

БЛОГ НА HUSL

Пропадают кнопки слайдера

Ответы (0 шт):