React redux: avoid onClick if loading

Question

I have a modal component with a button that makes a async call with axios.

I need to remove onClick action while the call is being made to avoid unwanted clicks.

Something like this but more elegant:

const Modal = ( props ) => {  
  const modal = props.modal
  if (!modal.loading) {
    return (
        <div>
          <button onClick={() => props.updateModal(123)}>123</button>        
        </div>
    );
  }
  else {
    return (
        <div>
          <button>123</button>        
        </div>
    );    
  }
}

const mapStateToProps = state => {
  return {
    modal: state.modal,
  }
}

const mapDispatchToProps = dispatch => {
  return {    
    updateModal(number){      
      dispatch(loadingModal(true));      

      // async call
      return axios.post(
          // async call data
        )
        .then((response) => {
          dispatch(loadingModal(false));          
          dispatch(updateModal(number))
        })
        .catch((error) => {
            console.log("Error");
        }
      )
    }
  };
}

Shubham Khatri · Accepted Answer · 2018-01-23 16:35:01Z

3

Instead of conditionally rendering the button with and without onClick you can conditionally take the action like

const Modal = ( props ) => {  
  const modal = props.modal
  const handleClick = (val) => {
       if(!modal.loading) {
          props.updateModal(val)
       }
   }
    return (
        <div>
          <button onClick={() => handleClick(123)}>123</button>        
        </div>
    );
}

answered Jan 23, 2018 at 16:35

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

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

Collectives™ on Stack Overflow

React redux: avoid onClick if loading

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related