How to assign refs to multiple components

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 (
      <div>
        {
          this.state.acts.map((act, index) => {
            let boundActRunClick = this.onRunClick.bind(this, act, index);

            return (
              <p key={act._id}>
                Name: {act.name}, URL(s): {act.urls}
                <button ref={(el) => this.btn[index] = el} onClick={boundActRunClick}>Run</button>
              </p>
            )
          })
        }
      </div>
    );
  }

Leave a Comment