How to get exact DOM element using useRef in React

Question

I am trying to get the exact DOM element in the ListItem of List using 'React.useRef(null);' but not able to get it, i am using below code

  useEffect(() => {
   //This is where i am trying to get the exact DOM element
   console.log("listRef", listRef.current);
 }, [searchText]);

Here is my codesandbox link

How to get exact DOM element and what am i missing?

What do you mean exact DOM element? You are getting the component. — SILENT
– SILENT, Commented Aug 17, 2020 at 13:27
@SILENT I need the exact DOM element of the ListItem, after that want to add ` listRef.current && listRef.current.scrollIntoView({behavior: "smooth", block: "nearest"})` to scroll to that one. Do you want me to add the scroll code also to the codesandbox link — Lara
– Lara, Commented Aug 17, 2020 at 13:30
Check this might help you : stackoverflow.com/questions/54940399/… — Harmandeep Singh Kalsi
– Harmandeep Singh Kalsi, Commented Aug 17, 2020 at 13:32
Your current implementation is referring to the last element. Do you only want to scroll to the last element or any element on the list? — SILENT
– SILENT, Commented Aug 17, 2020 at 13:35
@SILENT Yes, exactly that is the issue. I do not want to scroll to last element instead want to scroll to element which contains the first occurrence of searchText entered in searchBar. — Lara
– Lara, Commented Aug 17, 2020 at 13:37

SILENT · Accepted Answer · 2020-08-17 16:14:19Z

2

Change your useRef to

const listRef = useMemo(() => messages.map(() => React.createRef<HTMLElement>()), [])

For each list item, set

ref={listRef[id]}

Call the respective item to scroll to using

listRef && listRef[id] && listRef[id].current.scrollIntoView({behavior: "smooth", block: "nearest"});

https://codesandbox.io/s/material-message-search-0x04c?file=/demo.tsx

edited Aug 17, 2020 at 16:14

answered Aug 17, 2020 at 13:45

SILENT

4,2967 gold badges45 silver badges67 bronze badges

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

4 Comments

Lara Over a year ago

Thanks so much, Could you please update my sandbox, since i am using typescript, const listRef = React.useRef({}) is giving error there. Thanks

SILENT Over a year ago

Typescript type is probably { [key: number]: HTMLElement} . Updated and added codesandbox link

Lara Over a year ago

@Thanks for sharing the codesandbox link but unfortunately scroll is yet not working. Is something missed?

SILENT Over a year ago

@Lara Oops, sorry. Forgot createRef part. Updated

Harmandeep Singh Kalsi · Accepted Answer · 2020-08-17 14:46:53Z

1

Here you go with the code :

Declare the refs array :

const listRef =  React.useMemo(() => messages.map(() => React.createRef()), []);

Update your useEffect code as below:

 useEffect(() => {
    //This is where i am trying to get the exact DOM element
    let index = 1;
    for (let i = 0; i < messages.length; i++) {
      if (
        messages[i].primary.includes(searchText) ||
        messages[i].secondary.includes(searchText)
      ) {
        index = i;
        break;
      }
    }
    
       listRef[index+1].current.scrollIntoView({
        behavior: "smooth",
        block: "nearest"
      });
  }, [searchText]);

Working code example: https://codesandbox.io/s/material-demo-forked-bm4pl?file=/demo.tsx

edited Aug 17, 2020 at 14:46

answered Aug 17, 2020 at 14:05

Harmandeep Singh Kalsi

3,3652 gold badges17 silver badges31 bronze badges

4 Comments

Lara Over a year ago

Thanks so much Harman, i am trying to implement it in my solution, will accept as answer once it works. Thanks again

Lara Over a year ago

Why am i getting React Hook "useRef" cannot be called inside a callback at const listRef = Array.from({ length: messages.length }, () => useRef(null));

Harmandeep Singh Kalsi Over a year ago

You need to change this also : <ListItemText ref={listRef[id]} primary={primary} secondary={secondary} /> </ListItem> . Also useRef from react at top where you have imported useEffect

Lara Over a year ago

I did that and not getting error there but at this line const listRef = Array.from({ length: messages.length }, () => useRef(null));

Collectives™ on Stack Overflow

How to get exact DOM element using useRef in React

2 Answers 2

4 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related