0

I want to show slideshow circle buttons dynamically based on the number of slides I will get from the server. I couldn't do it with loops since I have a number of slides predefined & no array. How can I show my buttons? Now I manually created 4 buttons. (I deleted unnecessary code so that only important snippets are present).

import React = require("react");

type NavigationEvent = "Backward" | "Forward" | "Pause" | "Play";

interface Props {
    slidesAmount: number;
    activeSlideIndex: number;
}

function SlideshowCarouselNavigationBarComponent(props: Props) {
const onPlayButtonClicked = () => {
        props.navigate("Play");
    }

    const onPauseButtonClicked = () => {
        props.navigate("Pause");
    }

    const onSlideButtonClicked = index => {
        props.navigateToIndex(index);
    }

return (
        <div>
            <div>
                <div className={classes.dotsContainer}>
                    <div className={classes.dots}>
                    </div>
                    <div className={classes.dots}>
                    </div>
                    <div className={classes.dots}>
                    </div>
                    <div className={classes.dots}>
                    </div>
                </div>
            </div>
        </div>
    )
}

export = SlideshowCarouselNavigationBarComponent;
Olga Ivanova
  • 13
  • 3

2 Answers2

0

You can use Array.fill() This will create array of preidentified length filled with unidentified values

new Array(props.slidesAmmount).fill().map((v, i){
   return <div> .... </div>
});

please see How to create an array containing 1...N for more detailed answers

Artem Zelinskiy
  • 2,201
  • 16
  • 19
0

You can do the following (it is the most concise and understable way that I found out) : Iterating slidesAmount times, in order to display the circles:

<div className={classes.dotsContainer}>
    {[...Array(props.slidesAmmount)].map((_)=>(
       <div className={classes.dots}>
       </div>
    ))}
</div>
TheTisiboth
  • 1,431
  • 1
  • 6
  • 13