How to create dynamic refs in functional component- Using useRef Hook

by

refs are basiclly objects, and they have a default key current. So, you can create an array of refs like this:

const myRefs= useRef([]);

Then you can populate this array of refs like this:

ref={el => (myRefs.current[i] = el)}

Here is the full version:

{
  [1, 2, 3].map((v, i) => {
    return (
      <button
        ref={(el) => (myRefs.current[i] = el)}
        id={i}
        onClick={submitClick}
      >{`Button${i}`}</button>
    );
  });
}

More Related Contents:

  1. How to fix missing dependency warning when using useEffect React Hook
  2. Infinite loop in useEffect
  3. How to use `setState` callback on react hooks
  4. How to use callback with useState hook in react [duplicate]
  5. Understanding the React Hooks ‘exhaustive-deps’ lint rule
  6. In useEffect, what’s the difference between providing no dependency array and an empty one?
  7. React useState cause double rendering
  8. How to use throttle or debounce with React Hook?
  9. React useReducer async data fetch
  10. Line 0: Parsing error: Cannot read property ‘map’ of undefined
  11. How to sync props to state using React hooks : setState()
  12. useNavigate() may be used only in the context of a component
  13. Testing React components that fetches data using Hooks
  14. Why React useState with functional update form is needed?
  15. React.useState does not reload state from props
  16. React Hook “useState” is called in function “app” which is neither a React function component or a custom React Hook function
  17. React: useState or useRef?
  18. How do react hooks determine the component that they are for?
  19. useReducer Action dispatched twice
  20. Attempted import error: ‘useHistory’ is not exported from ‘react-router-dom’
  21. is it possible to React.useState(() => {}) in React?
  22. React Hooks – How do I implement shouldComponentUpdate?
  23. React hook rendering an extra time
  24. Field Array in React using formik
  25. How to test a react component that is dependent on useContext hook?
  26. What is the expected return of `useEffect` used for?
  27. ReactJS – prevState in the new useState React hook?
  28. Property ‘value’ does not exist on type ‘never’. when use useRef hook in mui
  29. Put A Warning If Page Refresh in ReactJS
  30. React – Is useState ‘s setter function able to change?

Leave a Comment