title: Disable all buttons on click in react
body: <p>So I have a component, called AddButton</p>
  
  <pre><code>export default class AddButton extends React.Component {
    constructor(props) {
      super(props);
    }
  
    addItem(e) {
      this.btn.setAttribute('disabled', 'disabled');
      this.props.addItem(e.target.getAttribute('data-row-index'))
    }
  
    render() {
      return (
        &lt;div className="row"&gt;
          &lt;div className="col-md-12 text-center"&gt;
            &lt;button ref={btn =&gt; {this.btn = btn }} className="btn btn-success" onClick={this.addItem.bind(this)} data-row-index={this.props.rowIndex}&gt;Add&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      )
    }
  }
  </code></pre>
  
  <p>Some where else in the code I do:</p>
  
  <pre><code>if (this.props.addButton) {
    rows.push(
      &lt;td key="add"&gt;
        &lt;AddButton
          addItem={this.props.addItem}
          rowIndex={this.props.rowIndex}
        /&gt;
      &lt;/td&gt;
    )
  }
  </code></pre>
  
  <p>So I have at one time 50 of these in a table at the end of the row. When one is clicked I wanted to disable <strong>all the buttons</strong>.</p>
  
  <p>So as you can see I have done, in <code>addItem(e)</code>:</p>
  
  <pre><code>addItem(e) {
    this.btn.setAttribute('disabled', 'disabled');
    this.props.addItem(e.target.getAttribute('data-row-index'))
  }
  </code></pre>
  
  <p>But when I test this, only the button after the one is clicked is disabled. I want them <strong>all to be disabled</strong></p>
  
  <p><em>Any way I could modify this to achieve that?</em></p>