OnClick - How to add first, last and active ClassName for each slide in React?

Question

I would highly appreciate it if someone could help me out. I'm working with React for 1 month now and currently working on a Slider. I need some help, I am trying to add a class "first" and "last" for each slide dynamically. I have a Click event PrevSlide and NextSlide which will slide to the next and previous slide. However, if I reach the first or last slide I would like to add a class to the Prev/Next button. Instead, it's now adding the same class to all the slides on render. Also, how can I add the current Active ClassName on Click?

Can someone explain to me how to do this? Thanks in advance! so I can learn from this.

My code:

import React, { Component } from 'react';

// Components
import QuizSlide from '../Slider/Slide';
import LeftArrow from '../Arrows/LeftArrow';
import RightArrow from '../Arrows/RightArrow';

// Import Pictures
import Slide1 from 'images/slider/1.jpeg';
import Slide2 from 'images/slider/2.jpeg';
import Slide3 from 'images/slider/3.jpeg';
import Slide4 from 'images/slider/4.jpeg';
import Slide5 from 'images/slider/5.jpeg';

// App Styles
import 'sass/root.scss';

export default class QuizSlider extends Component {

    // Constructor
    constructor(props) {
        super(props);
        this.state = {
            currentIndex: 0,
            translateValue: 0,
            data: [
                {
                    content: 'Slide show 1',
                    image: `${Slide1}`
                },

                {
                    content: 'Slide show 2',
                    image: `${Slide2}`
                },

                {
                    content: 'Slide show 3',
                    image: `${Slide3}`
                },

                {
                    content: 'Slide show 4',
                    image: `${Slide4}`
                },

                {
                    content: 'Slide show 5',
                    image: `${Slide5}`
                }
            ]
        }
    }

    // Functions
    PrevSlide = () => {
        if(this.state.currentIndex === 0) {
          return this.setState({
            currentIndex: 0,
            translateValue: 0
          });
        }

        // This will not run if we met the if condition above
        this.setState(PrevState => ({
            currentIndex: PrevState.currentIndex - 1,
            translateValue: PrevState.translateValue + (this.slideWidth())
        }));        
    }

    NextSlide = () => {
        // Exiting the method early if we are at the end of the images array.
        // We also want to reset currentIndex and translateValue, so we return
        // to the first image in the array.
        if(this.state.currentIndex === this.state.data.length - 1) {
          return this.setState({
            currentIndex: 0,
            translateValue: 0
          });
        }

        // This will not run if we met the if condition above
        this.setState(NextState => ({
            currentIndex: NextState.currentIndex + 1,
            translateValue: NextState.translateValue + -(this.slideWidth())
        }));
    }

    slideWidth = () => {
        return document.querySelector('.QuizSlide').clientWidth
    }   

    // Render
    render() {
        return (
            <div className="QuizSlider">

                <div
                  className="slider-wrapper" 
                  style={{
                    transform: `translateX(${this.state.translateValue}px)`,
                    transition: 'transform ease-out 0.45s'
                  }}
                >

                {
                    this.state.data.map((props, index) => (
                        <QuizSlide key={index} image={props.image}  />
                    ))
                }  

                </div>

                <LeftArrow PrevSlide={this.PrevSlide} />
                <RightArrow NextSlide={this.NextSlide} />
            </div>
        );
    }
}

Answer 1

you can conditionally render the first, last, and active classes in the render as you map over your data

here's an example to check out with notes to help explain what's going on. open dev tool to see the classes rendering