React array of refs

arrays reactjs refs
Elias Ghali picture Elias Ghali · Jul 26, 2017 · Viewed 21.8k times · Source

i have read in a post on Stackoverflow question about refs

that we can use something like the following code to assign an array of refs to different inputs like this:

<Progressbar completed={25} id="Progress1" ref={(input) => {this.Progress[0] = input }}/>

<Progressbar completed={50} id="Progress2" ref={(input) => {this.Progress[1] = input }}/>

<Progressbar completed={75} id="Progress3" ref={(input) => {this.Progress[2] = input }}/>

but when i try it, it returns this error:

Uncaught TypeError: Cannot set property '0' of undefined

and it doesn't work, am I missing something?

Answer

CD.. picture CD.. · Jul 26, 2017

Create the array in you constructor, like:

constructor(){
  super()

  this.Progress = []
}

Related questions

Objects are not valid as a React child. If you meant to render a collection of children, use an array instead

I am setting up a React app with a Rails backend. I am getting the error "Objects are not valid as a React child (found: object with keys {id, name, info, created_at, updated_at}). If you meant to render …

Read More
Delete item from state array in react

The story is, I should be able to put Bob, Sally and Jack into a box. I can also remove either from the box. When removed, no slot is left. people = ["Bob", "Sally", "Jack"] I now need to remove, say, "…

Read More
React proptype array with shape

Is there a built-in way to use proptypes to ensure that an array of objects being passed to a component is actually an array of objects of a specific shape? Maybe something like this? annotationRanges: PropTypes.array(PropTypes.shape({ start: …

Read More