Setting setTimeOut in a react class base component

Question

Plaese I want to setTimeOut in my class base component. Trying different method but still it did not work. I want the setTimeout to call nextClick/onClickI after a specified second but, still don't understand how to go about it. Please help, if you have an idea. below is the component code...

class AbCarousel extends Component {
    state = {
        data: []
    }

    myRef = React.createRef();

    getData = async () => {
        const res = await fetch('aboutdata.json');
        const data = await res.json();
        this.setState({data: data})
    }

    componentDidMount() {
        this.getData();
    }


 prevClick = () => {
     const slide = this.myRef.current;
     slide.scrollLeft -= slide.offsetWidth;
     if (slide.scrollLeft <= -0){
         slide.scrollLeft = slide.scrollWidth; 
     }
    };


 nextClick = () => {
        const slide = this.myRef.current;
     slide.scrollLeft += slide.offsetWidth;
     if (slide.scrollLeft >= (slide.scrollWidth - slide.offsetWidth)) {
         slide.scrollLeft = 0; 
     }
    };
 
    render() {
        const { data } = this.state;
        return (
                <div className="wrapper">
                <div className="app" ref={this.myRef}>
                    <AbCard data={data} />
                </div>
                <div className="row">
                    <div className="prev" onClick={this.prevClick}>
                    <div><FaChevronLeft /></div>
                    </div>
                    <div className="next" onClick={this.nextClick}>
                    <div><FaChevronRight /></div>
                    </div>
                </div>
            </div>
        )
    }
}

export default AbCarousel

It doesn't appear you call setTimeout in your code. Can you update your question to include the relevant code you are trying to use setTimeout in? What is the problem you are trying to solve with a timeout? When/where do you want a timeout? — Drew Reese
– Drew Reese, Commented Aug 12, 2021 at 23:58

sculs · Accepted Answer · 2021-08-13 00:40:53Z

1

Simplest is just to update your onClick handler to take setTimeout as a callback like the following

onClick={() => setTimeout(this.nextClick, numSeconds)

or you can update the nextClick method directly and use a callback function within the setTimeout and wrap around the code you wish to delay the execution on:

 nextClick = () => {
   const slide = this.myRef.current;
     
   setTimeout(() => {
     slide.scrollLeft += slide.offsetWidth;
     if (slide.scrollLeft >= (slide.scrollWidth - slide.offsetWidth)) {
         slide.scrollLeft = 0; 
     }, numSeconds)
   }

answered Aug 13, 2021 at 0:40

sculs

1946 bronze badges

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

1 Comment

Jazz Over a year ago

If you do this you should save a ref and clear the timeout on unmount

Collectives™ on Stack Overflow

Setting setTimeOut in a react class base component

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related