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

You should use ref callback instead of ref and also yes you need multiple refs, an array should be good

According to the docs:

React supports a special attribute that you can attach to any component. The ref attribute takes a callback function, and the callback will be executed immediately after the component is mounted or unmounted.

When the ref attribute is used on an HTML element, the ref callback receives the underlying DOM element as its argument.

ref callbacks are invoked before componentDidMount or componentDidUpdate lifecycle hooks.

Using the ref callback just to set a property on the class is a common pattern for accessing DOM elements. The preferred way is to set the property in the ref callback like in the above example. There is even a shorter way to write it: ref={input => this.textInput = input}.

String refs are a legacy and and as per the docs:

Legacy API: String Refs

If you worked with React before, you might be familiar with an older API where the ref attribute is a string, like "textInput", and the DOM node is accessed as this.refs.textInput. We advise against it because string refs have some issues, are considered legacy, and are likely to be removed in one of the future releases. If you’re currently using this.refs.textInput to access refs, we recommend the callback pattern instead.

constructor() {
    super();
    this.btn = [];
}
onRunClick(act, index, e) {
    this.btn[index].setAttribute("disabled", true);
  }

  render () {
    return (
      

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

            return (
              

                Name: {act.name}, URL(s): {act.urls}
                 this.btn[index] = ref} onClick={boundActRunClick}>Run
              
            )
          })
        }
      
    );
  }