Add class to specific element in React onClick

Question

I use react-slick carousel with custom controls. I want to add 'active' class only to element that is changes the slide (by onClick event). But in my case 'active' class toggles for all of them.

export default class ServicesSlider extends React.Component {
    constructor(props) {
        super(props)
        this.changeSlide = this.changeSlide.bind(this)
        this.state = {
            isActive: false
        }
    }
    changeSlide(e) {
        this.setState({
            isActive: !this.state.isActive
        });
        this.slider.slickGoTo(e);
    }
    render() {
        return (
            <div>
                <section className="carousel-controls">
                    <div
                        onClick={() => this.changeSlide(0)}
                        className={this.state.isActive
                        ? 'column' : 'column active'}>Slide one
                    </div>
                    <div
                        onClick={() => this.changeSlide(1)}
                        className={this.state.isActive
                        ? 'column' : 'column active'}>Slide two
                    </div>
                    <div
                        onClick={() => this.changeSlide(2)}
                        className={this.state.isActive
                        ? 'column' : 'column active'}>Slide three
                    </div>
                    <div
                        onClick={() => this.changeSlide(3)}
                        className={this.state.isActive
                        ? 'column' : 'column active'}>Slide four
                    </div>
                </section>
                <Slider ref={c => this.slider = c}>
                    <div className="sliderItem">Slide 1</div>
                    <div className="sliderItem">Slide 2</div>
                    <div className="sliderItem">Slide 3</div>
                    <div className="sliderItem">Slide 4</div>
                </Slider>
            </div>
        )
    }
}

How to properly append class to a specific element in React?

maintain a state array of active class instead of a single state — Shubham Khatri
– Shubham Khatri, Commented Aug 4, 2017 at 14:43
You are passing an index to changeSlide, but only toggling the active state. The state will therefore be a boolean, true or false, instead of an integer representing the currently active element — Wolfie
– Wolfie, Commented Aug 4, 2017 at 14:44

Wolfie · Accepted Answer · 2017-08-04 14:47:27Z

5

The key is to not keep track of a boolean active, but of the active index. That is, which slide is active: 0, 1, 2, 3, or 4, .... You will need to modify your state to achieve that.

I would also advocate changing the parameter from e to something more descriptive, as e is generally used for events.

If you change your state to

this.state = {
    activeIndex: 0
}

then you can update the active value as such:

changeSlide(index) {
    this.setState({
        activeIndex: index
    });
    this.slider.slickGoTo(index);
}

and then check for active in render:

<div
    onClick={() => this.changeSlide(0)}
    className={this.state.activeIndex !== 0 ? 'column' : 'column active'}>
    Slide one
</div>

answered Aug 4, 2017 at 14:47

Wolfie

1,3798 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Chris · Accepted Answer · 2017-08-04 14:55:50Z

Rather than having an isActive variable, which suggests only a true/false value, why not have a currentActiveSlide variable?

In the constructor you initiate it as null (if you want your App to start with no active slide). And then update it with the index when you click it.

So your changeSlide() function becomes:

changeSlide(idx) {
  // If we click on the already active slide, set "currentActiveSlide" to null.
  // Otherwise, set it to the "idx".
  this.setState({
    currentActiveSlide: idx !== this.state.currentActiveSlide ? idx : null
  });
  this.slider.slickGoTo(idx);
}

I changed your e parameter to idx for clarity. because the former suggests an event. Of course, you would need to update your render as well:

className={this.state.currentActiveSlide === 1 ? 'column' : 'column active'}

(though I think you got the logic reversed here).

Ryan Nourbaran · Accepted Answer · 2017-08-04 15:30:08Z

You can't have the same state name in all the slides. I suggest creating an array as this.state.isActive, and having each slide be a different index of that array. Then you just change the array index onClick

export default class ServicesSlider extends React.Component {
constructor(props) {
    super(props)
    this.changeSlide = this
        .changeSlide
        .bind(this)
    this.state = {
        isActive: Array(4).fill(false); //new stuff
    }
}
changeSlide(e) {
    const newBool = !this.state.isActive[e]; //new stuff
    var newArray = this.state.isActive;//new stuff
    newArray[e] = (newBool);//new stuff
    this.setState({
        isActive: newArray//new stuff
    });
    this
        .slider
        .slickGoTo(e);
}
render() {
    return (
        <div>
            <section className="carousel-controls">
                <div
                    onClick={() => this.changeSlide(0)}
                    className={this.state.isActive[0]//new stuff
                    ? 'column'
                    : 'column active'}>Slide one
                </div>
                <div
                    onClick={() => this.changeSlide(1)}
                    className={this.state.isActive[1]//new stuff
                    ? 'column'
                    : 'column active'}>Slide two
                </div>
                <div
                    onClick={() => this.changeSlide(2)}
                    className={this.state.isActive[2]//new stuff
                    ? 'column'
                    : 'column active'}>Slide three
                </div>
                <div
                    onClick={() => this.changeSlide(3)}
                    className={this.state.isActive[3]//new stuff
                    ? 'column'
                    : 'column active'}>Slide four
                </div>
            </section>
            <Slider ref={c => this.slider = c}>
                <div className="sliderItem">Slide 1</div>
                <div className="sliderItem">Slide 2</div>
                <div className="sliderItem">Slide 3</div>
                <div className="sliderItem">Slide 4</div>
            </Slider>
        </div>
    )
}
}

Mayank Shukla · Accepted Answer · 2017-08-04 15:36:52Z

0

Your method should be :

this.setState({
    activeSlide: e
});

Then use:

className={this.state.activeSlide === {x} ? 'column' : 'column active'}

edited Aug 4, 2017 at 15:36

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

answered Aug 4, 2017 at 14:47

Xmer

12 bronze badges

Collectives™ on Stack Overflow

Add class to specific element in React onClick

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related