Updating state onChanged causes tons of logs

I have a problem while trying to set the current active slide index on carousel changed onChanged. I’m passing this state down the slide, but when I update the slider state it simply reaches the maximum call stack of JS.

I have the following structure:

<Carousel>
    <Slide currentSlideIndex={this.state.currentSlideIndex}/>
    <Slide currentSlideIndex={this.state.currentSlideIndex}/>
</Carousel>

The thing is that the carousel if going to be controlled by each Slide, since there is some video I want to play, therefore I am planning to use the next() method.

[joshuadiezmo]

I create separate component and add shouldComponentUpdate

class ImagePreview extends Component {
	shouldComponentUpdate(nextProps, nextState) {
		return false;
	}

	render() {
		return (
			<div>
				<OwlCarousel
					className="owl-theme"
					loop margin={10} nav autoplay items={1}
				>
					<div class="item"><h4>1</h4></div>
					<div class="item"><h4>2</h4></div>
					<div class="item"><h4>3</h4></div>
					<div class="item"><h4>4</h4></div>
					<div class="item"><h4>5</h4></div>
					<div class="item"><h4>6</h4></div>
					<div class="item"><h4>7</h4></div>
					<div class="item"><h4>8</h4></div>
					<div class="item"><h4>9</h4></div>
					<div class="item"><h4>10</h4></div>
					<div class="item"><h4>11</h4></div>
					<div class="item"><h4>12</h4></div>
				</OwlCarousel>
			</div>
		);
	}
}

[adriancmiranda]

I made something very similar to @joshuadiezmo

import React from 'react';
import ReactOwlCarousel from 'react-owl-carousel';
import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel/dist/assets/owl.theme.default.css';

export default class OwlCarousel extends React.Component {
	shouldComponentUpdate() {
		return false;
	}

	render() {
		const { children, ...props } = this.props;
		return (
			<ReactOwlCarousel {...props}>
				{children}
			</ReactOwlCarousel>
		);
	}
}

that works like a charm