How can I assign dynamical values to refs in ReactJS?

Question

In this ReactJS documentation on refs, myInput is assigned to the input's ref.

<input ref="myInput" />

I have more than one input which I know only during the run time. I want to know how can I assign myInput1, myImput2 to multiple inputs?

UPDATE:

I want to clarify on why I know the number of inputs only at run time.

I have a high order component which has an input control inside of that. The high order components can be many. They are created from an array of data. I want the ref to be set for the input inside that high order component so I can show some tooltip. There is only one tooltip in the DOM and positioned based on the input control's position.

how can you only know about your inputs during runtime are they bring rendered outside of react? right about the example you posted it says: Assign a ref attribute to anything returned from render such as: — omarjmh
– omarjmh, Commented Jun 5, 2016 at 2:01
thanks, thats much clearer now, you could use an index to add a ref to the input when you map, something like ref={'myInput+i'} — omarjmh
– omarjmh, Commented Jun 5, 2016 at 2:17

omarjmh · Accepted Answer · 2016-06-05 02:26:34Z

2

Here is a way to do it: you can dynamically add refs as you map over the array.

http://jsfiddle.net/vhuumox0/21/

class Main extends React.Component{
    constructor(props){
    super(props);
  }
  componentDidMount() {
   console.log(this.refs); // works, shows 3
   console.log(this.refs.myInput2); // works
  }
  render() {
    const inputs = this.props.inputs.map((inp, i) => {
     return <input ref={`myInput${i}`}>{inp}</input>
    })
    return (
        <div>{inputs}</div>
    );
  }
}

ReactDOM.render(<Main inputs={['input1', 'input2', 'input3']}/>,

answered Jun 5, 2016 at 2:26

omarjmh

13.9k6 gold badges37 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can I assign dynamical values to refs in ReactJS?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related