How to prevent a double click in ReactJS

Question

I am working on search filter in ReactJS and I face a problem. Problem is about when User does some search and wants to click on next (because I have pagination in app) then the User will click twice to load other pages of data.

I need to avoid this behaviour: I mean when user does single click on next it should be "load a data" instead of "double click".

I am new to ReactJS, please expert help me

Code

    btnClick() {
        const { Item,skip , filtered, data } = this.state
        if(filtered.length>0 || !data.length ){
          window.alert("Hello,")
          this.setState({
            filtered:[],
            skip:0
          },()=>this.getData());
          return false
        }else {
          window.alert("Hello , Dear")
        this.setState(
          {
            Item,
            skip: skip + pageSize
          },
          () => this.getData()
        );}

      }

on click disable the button, then when data returns re enable it. — Isaac Vidrine, Apr 08 '19 at 17:54
Duplicated -> https://stackoverflow.com/questions/35315872/reactjs-prevent-multiple-times-button-press — Christian Saiki, Dec 03 '19 at 00:08

Sushanth -- · Answer 1 · 2020-08-18T18:06:27.987

You can have a isLoading state and set the disabled prop on the button when in this state which will not allow the button to be clicked again while the data is being fetched.

 btnClick() {
   const {
     Item,
     skip,
     filtered,
     data
   } = this.state;
   
   if (filtered.length > 0 || !data.length) {
     window.alert("Hello,")
     this.setState({
       filtered: [],
       skip: 0
     }, () => this.fetchData());
     return false
     
   } else {
     window.alert("Hello , Dear")
     this.setState({
         Item,
         skip: skip + pageSize
       },
       () => this.fetchData()
     );
   }
 }
 
 fetchData() = async() => {
     this.setState({ isLoading: true });
     
     await this.getData();
     
     this.setState({ isLoading: false });
 }
 
 render() {
        const {
      isLoading
    } = this.state;
    
    const buttonProps = isLoading ? { disabled: true} ? {};
    
    return (
      <button onClick={this.btnClick} { ...buttonProps }>
            Click to fetch
      </button>
    );
 }

How to prevent a double click in ReactJS

1 Answers1

Linked