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 can use the npm module react-multi-ref (a tiny library by me) to do this.

import React from 'react';
import MultiRef from 'react-multi-ref';

class Foo extends React.Component {
  _actRefs = new MultiRef();

  onRunClick(act, e) {
    this._actRefs.map.get(act._id).setAttribute("disabled", true);
  }

  render () {
    return (
      

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

            return (
              

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

Though in this specific case where you just want to change an attribute on an element, instead of using a ref you should do it through state and props on the through React as in the answer by @bennygenel. But if you need to do something else (call an imperative DOM method on the button, read the value of an uncontrolled input element, read the screen position of an element, etc) then you'll need to use a ref like this.