CODEWITHSUNDEEP
reactjs
TheWebs
TheWebs

Reputation: 12923

Disable all buttons on click in react

So I have a component, called AddButton

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 (
      <div className="row">
        <div className="col-md-12 text-center">
          <button ref={btn => {this.btn = btn }} className="btn btn-success" onClick={this.addItem.bind(this)} data-row-index={this.props.rowIndex}>Add</button>
        </div>
      </div>
    )
  }
}

Some where else in the code I do:

if (this.props.addButton) {
  rows.push(
    <td key="add">
      <AddButton
        addItem={this.props.addItem}
        rowIndex={this.props.rowIndex}
      />
    </td>
  )
}

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 all the buttons.

So as you can see I have done, in addItem(e):

addItem(e) {
  this.btn.setAttribute('disabled', 'disabled');
  this.props.addItem(e.target.getAttribute('data-row-index'))
}

But when I test this, only the button after the one is clicked is disabled. I want them all to be disabled

Any way I could modify this to achieve that?

Upvotes: 0

Views: 1759

Answers (1)

Meisam Mahdian
Meisam Mahdian

Reputation: 26

React components have syntax like HTML DOM but they are not, they are modules and every time you use that module for example in your table it would be a new instance of that module. So if you want to share a state between them you have to pass it as props to them and you shouldn't treat them as HTML nodes.

Upvotes: 1

Related Questions