How to assign refs to multiple components

Question

I\'m using React to render multiple data using array.map.
How can disable the clicked button from the list?

This is my code:

  onRun         


        

Answer 1

Like @ShubhamKhatri's answer using ref is an option. You can also achieve desired behavior with state too.

Example (Single Disabled Button Option)

class App extends Component{
  constructor() {
    super();
    this.state = {
      disabled: ''
    };
  }

  onRunClick(act, index, e) {
    this.setState({ disabled: act._id });
  }

  render() {
    return (
      

        {
          this.state.acts.map((act, index) => {
            let boundActRunClick = this.onRunClick.bind(this, act, index);
            return (
              

                Name: {act.name}, URL(s): {act.urls}
                Run
              
            )
          })
        }
      
    );
  }
}

Example (Multiple Disabled Button Option)

class App extends Component{
  constructor() {
    super();
    this.state = {
      buttons: {}
    };
  }

  onRunClick(act, index, e) {
    this.setState((prevState) => { 
      const buttons = Object.assign({}, prevState.buttons, { [act._id]: !prevState.buttons[act._id] });
      return { buttons };
    });
  }

  render() {
    return (
      

        {
          this.state.acts.map((act, index) => {
            let boundActRunClick = this.onRunClick.bind(this, act, index);
            return (
              

                Name: {act.name}, URL(s): {act.urls}
                Run
              
            )
          })
        }
      
    );
  }
}