Logo

dev-resources.site

for different kinds of informations.

Multiple item using one ref

Published at
8/1/2022
Categories
react
useref
Author
yensubldg
Categories
2 categories in total
react
open
useref
open
Author
9 person written this
yensubldg
open
Multiple item using one ref

Some cases in ReactJS, we need use a variable declared by useRef for items, components, ....

How to use

First, you need variable declared by useRef and
and set initialValue to be an empty array []

const exampleRef = useRef([]);
Enter fullscreen mode Exit fullscreen mode

Create a function to add item, component to exampleRef

const addToRefs = el => {
    if (el && !exampleRef.current.includes(el)) {
       exampleRef.current.push(el);
    }
};
Enter fullscreen mode Exit fullscreen mode

Then you just add ref to item, component, ...

<div ref={addToRefs}>                 
</div>
Enter fullscreen mode Exit fullscreen mode

Now, exampleRef.current as an array, you can use methods with array to use for exampleRef like map, forEach, ...

useref Article's
29 articles in total
Favicon
How to create components interfaces using useRef/forwardRef/useImperativeHandle
Favicon
Hooks Behind The Scenes 3, UseRef!!!
Favicon
Mastering React's useRef Hook: Working with DOM and Mutable Values
Favicon
Understanding useRef: A Beginners Guide
Favicon
useRef Hook Explained
Favicon
useRef() in React . . .
Favicon
React State Management: When & Where add your states?
Favicon
Unlocking the Power of useRef: Besic to Advanced Examples for React Developers
Favicon
Leveraging useRef in TypeScript for Efficient DOM Manipulation
Favicon
Unlocking the Power of React Hooks
Favicon
React.useRefの理解を含めるエクササイズ
Favicon
Mastering React's useRef Hook: A Deep Dive
Favicon
Unlocking the Power of useRef in React: 12 Essential Use Cases
Favicon
Série React Hooks: useRef
Favicon
Toggle Password Visibility Using React useRef
Favicon
Stop using useState for everything
Favicon
Using React hooks to develop a Video Player
Favicon
React - How to load a form with the latest data
Favicon
React: сфокусировать поле ввода по чекбоксу
Favicon
How do I check/uncheck all checkboxes with a button In React Js using useRef() Hook ?
Favicon
Multiple item using one ref
Favicon
Closures and useEffects
Favicon
I need help. TypeError: Cannot read properties of undefined (reading 'current')
Favicon
Using React useRef Hook to access immediate past props or state.
Favicon
Compare Props in React Functional Components.
Favicon
Creating infinitely scrolling SPA using React
Favicon
useRef()가 순수 자바스크립트 객체라는 의미를 곱씹어보기
Favicon
Complete useRef() hook with live code examples
Favicon
Useful Patterns with React hooks

Featured ones: