Trying to change react Carousel into class component - reactjs

Question

i have react carousel in the functional component , i am trying to change that component in to class component.. can any one help on this..
this is the link of code sand box....https://codesandbox.io/s/suspicious-cookies-fvm80?file=/src/App.js
functional component
import React, { useState } from 'react';
import ItemsCarousel from 'react-items-carousel';
export default () => {
const [activeItemIndex, setActiveItemIndex] = useState(0);
const chevronWidth = 40;
return (
<div style={{ padding: `0 ${chevronWidth}px` }}>
<ItemsCarousel
requestToChangeActive={setActiveItemIndex}
activeItemIndex={activeItemIndex}
numberOfCards={2}
gutter={20}
leftChevron={<button>{'<'}</button>}
rightChevron={<button>{'>'}</button>}
outsideChevron
chevronWidth={chevronWidth}
>
<div style={{ height: 200, background: '#EEE' }}>First card</div>
<div style={{ height: 200, background: '#EEE' }}>Second card</div>
<div style={{ height: 200, background: '#EEE' }}>Third card</div>
<div style={{ height: 200, background: '#EEE' }}>Fourth card</div>
</ItemsCarousel>
</div>
);
};

Answer 1

Wrap jsx in render() method, change useState hook to destruct from this.state, and create function for setting state.
Example
export default class carousel extends Component {
constructor(props) {
super();
this.state = {
activeItemIndex:0
};
}
setActiveItemIndex = (value) => {
this.setState({ activeItemIndex: value });
}
render() {
const { activeItemIndex } = this.state;
const chevronWidth = 40;
return (
<div style={{ padding: `0 ${chevronWidth}px` }}>
<ItemsCarousel
requestToChangeActive={this.setActiveItemIndex}
activeItemIndex={activeItemIndex}
numberOfCards={2}
gutter={20}
leftChevron={<button>{"<"}</button>}
rightChevron={<button>{">"}</button>}
outsideChevron
chevronWidth={chevronWidth}
>
<div style={{ height: 200, background: "#EEE" }}>First card</div>
<div style={{ height: 200, background: "#EEE" }}>Second card</div>
<div style={{ height: 200, background: "#EEE" }}>Third card</div>
<div style={{ height: 200, background: "#EEE" }}>Fourth card</div>
</ItemsCarousel>
</div>
);
}
}