ReactJs: Prevent multiple times button press

Question

In my React component I have a button meant to send some data over AJAX when clicked. I need to happen only the first time, i.e. to disable the button after it\'s first use.

Answer 1

By using event.target , you can disabled the clicked button. Use arrow function when you create and call the function onClick. Don't forget to pass the event in parameter.

See my codePen

Here is the code:

class Buttons extends React.Component{
  constructor(props){
    super(props)
    this.buttons = ['A','B','C','D']
  }

  disableOnclick = (e) =>{
    e.target.disabled = true
  }

  render(){
    return(

     

        {this.buttons.map((btn,index) => (
          this.disableOnclick(e)}
            >{btn}
        ))}
      
  )}

}
ReactDOM.render(, document.body);