How to prevent Multiple clicks in Reactjs

Question

I have this code in my component; I want to prevent multiple clicking because it avoids my preventing code to add the element with the same id, can anybody help me to write a function maybe kind of setTimeOut() or something like that to prevent the second click to pass after 1 second or half a second so multiple clicking can be prevented

 state = {
        redirect: false,
        loading: false,
        alreadyAddedFav: false,
    }




onClickedHandler = (recipe_id, token) => {
        if (!this.props.isAuthenticated) {
            this.setState({ redirect: true })
        }
        else {
            const favData = {
                recipe_id: recipe_id,
                userId: this.props.userId
            }
            if (this.props.favRecipes.length > 0) {

                if (!this.props.favRecipes.some(item => item.recipe_id === recipe_id)) {

                    console.log("added in the loop!")
                    this.props.onFav(favData, token);
                } else {
                    this.setState({ alreadyAddedFav: true })
                    console.log("it is already in the fav list!")
                    console.log(recipe_id)
                }

            } else {
                this.props.onFav(favData, token);
            }
        }
    }





     render() {
       return (
                 <SearchResult
                            key={ig.recipe_id}
                            title={ig.title}
                            imgSrc={ig.image_url}
                            clicked={() => this.onClickedHandler(ig.recipe_id, this.props.token)}
                        >
                        </SearchResult>)}

score 2 · Answer 1 · answered Oct 04 '18 at 18:14

2

make a instance variable lastClicked

then in clickHandler

if( new Date().getTime() - lastClicked < threshold ) {
   return; // dont do anything
}

threshold in your case is 1 second

answered Oct 04 '18 at 18:14

ashish singh

6,526
2
15
35

score 0 · Answer 2 · answered Oct 04 '18 at 19:04

Manage a Boolean property in your state and based on that boolean immediately return your function so, if it's true that will prevent user from multiple clicks.

 state = {
    redirect: false,
    loading: false,
    alreadyAddedFav: false,
    isAlreadyClicked: false, // Initially false because user didn't  clicked yet
 }

 onClickedHandler = (recipe_id, token) => {
 /* 
 * If isAlreadyClicked is true immediatly return the function
 * Which will prevent it's execution
 */
 if (this.state.isAlreadyClicked) return;

 // As user clicked and function execution starts so, make it true
 this.setState({
 isAlreadyClicked: true,
 })
    if (!this.props.isAuthenticated) {
        this.setState({ redirect: true })
    }
    else {
        const favData = {
            recipe_id: recipe_id,
            userId: this.props.userId
        }
        if (this.props.favRecipes.length > 0) {

            if (!this.props.favRecipes.some(item => item.recipe_id === recipe_id)) {

                console.log("added in the loop!")
                this.props.onFav(favData, token);
                // As now function did it's job return it back to the false
                this.setState({
                  isAlreadyClicked: false,
                })
            } else {
                this.setState({ alreadyAddedFav: true })
                console.log("it is already in the fav list!")
                console.log(recipe_id)
                // As now function did it's job return it back to the false
                this.setState({
                  isAlreadyClicked: false,
                })
            }

        } else {
            // As now function did it's job return it back to the false
            this.setState({
              isAlreadyClicked: false,
            })
            this.props.onFav(favData, token);
        }
    }
}


 render() {
   return (
             <SearchResult
                key={ig.recipe_id}
                title={ig.title}
                imgSrc={ig.image_url}
                clicked={() => this.onClickedHandler(ig.recipe_id,
                this.props.token)}
              >
              </SearchResult>
            )
          }

Nope, setState solutions not working, I need something to delay the second click, with setTimeout or promise etc. — , Oct 04 '18 at 21:15

How to prevent Multiple clicks in Reactjs

2 Answers2