How to create an array of React refs

Learn how to target multiple elements using React refs.

Related Tutorial

--- Online Courses ---

Learn React

Premium GreenSock Tutorials

Premium Online Courses for front end developers and designers.

Resources (Affiliate Link)
Signup to GreenSock through this link to support the channel.

[joanisky]

Im a beginner and it helped me to animate several elements simultaneously respecting the logic of React. Thank you so munch from France !

[afonsocarvalho]

Your explanation is so much better than the one in the documentation. Thank you for this great video!

[joephus]

Thank you so much for the vid! Had to remove the ref.current = [] part since it was reassigning current on every render, but this is so super helpful, have been trying to recreate boostrap dropdown and this is exactly what's needed to get those pesky offsets for each list item. Cheers!

[Keep_quiet_]

Damn ... Dude, thanks man, I've being looking for this method for a bit longer then I supposed. Bless you!

[minjukang]

Thanks for the video, I was able to implement a functionality to scroll to individaul section on the screen using this

[jorged]

This is exactly what I was looking for! thank you very much!

[kushaldavda]

Thankyou! you made it simple and short.

[michaeledano]

Thank you for this. It's really helpful.

[alabhyajindal]

Thanks!! Great explanation, super helpful

[christmascatalogue]

You're a lifesaver, thanks a million !

[rougemage]

Nice! I was juuust looking how to make arrays of refs while implementing gsap scrolltriggers, thank you! °D°

[Johnny_Blue]

Are you kidding me? I was trying this for the past week and could not make it work. I'm using FullpageJS and wanted to have same animation on every section for my elements but react was always throwing me some kind of error. In the end I was using FullpageJS function when a section is loaded but this is what I wanted at the begging. You are my hero.

[filipevalentegomes]

Do you have a full GSAP course with react?

[nickwoodward]

Is this still the way to do this? Also why do you have to set the initial state to an array if it's actually the .current property that points to the array of items? Appreciate the video though, great guide!

[alext]

trying to figure out how to do this for hours. Didn't realize you could just throw a callback into ref prop

[adithyasundar]

Hey ! That was some helpful tutorial to design a whole section with scroll. but if you can let me know how to target the h1, title tags seprately in the section, My case is the background color remains static the image and the title tag changes as we scroll, it changes horizontally, if we scroll
Thanks

[JoeBoo]

What is the main purpose of using this technique? Thanks for the vid by the way!:D

[johnnamtae]

i hate tomatoes too but pretend to like them when i eat burgers because of spongebob

[batuhankir]

i wanna make a basic list: it will take parameter from an array like list=["name", "surname"]. i wanna put a "-" sign front them they will look like -name -surname when i hover them how can animate them. it is very easy with vanilla js but icadt do it with react. can u help me please

[wchorski]

how would I trigger a child function from the parent using the `useImperativeHandle()` hook?

Now that the ref is an Array, i assumed it would be something like



but with no luck