title: How to prevent Multiple clicks in Reactjs
body: <p>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 <code>setTimeOut()</code> or something like that to prevent the second click to pass after 1 second or half a second so multiple clicking can be prevented</p>
  
  <pre><code> state = {
          redirect: false,
          loading: false,
          alreadyAddedFav: false,
      }
  
  
  
  
  onClickedHandler = (recipe_id, token) =&gt; {
          if (!this.props.isAuthenticated) {
              this.setState({ redirect: true })
          }
          else {
              const favData = {
                  recipe_id: recipe_id,
                  userId: this.props.userId
              }
              if (this.props.favRecipes.length &gt; 0) {
  
                  if (!this.props.favRecipes.some(item =&gt; 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 (
                   &lt;SearchResult
                              key={ig.recipe_id}
                              title={ig.title}
                              imgSrc={ig.image_url}
                              clicked={() =&gt; this.onClickedHandler(ig.recipe_id, this.props.token)}
                          &gt;
                          &lt;/SearchResult&gt;)}
  </code></pre>