How to go to last element in react?

Question

I tried scrollIntoView and used .lastchild but I can't go to the latest comment. Used window.scrollTo too can't find any solution.

Can anyone have some suggestions on what will work?

     const click = () => {
                fetch('url')
                .then(res => res.json())
                .then(data => {
                    if (data.affectedRows > 0) {
                       var element = document.getElementById("txt").lastChild;
                        element.scrollIntoView({behavior: "smooth", block: "end", inline: "center"});
                 }
            })
        }         
}

 {getComment.map(cmnt =>
                        <div key={cmnt.comment_id} className="article-comments-reply">
                            <div className="text-box" id="txt">
                                <h3>{cmnt.username}</h3>
                                <div className="reply-box">
                                    <h4>{cmnt.comment_text}</h4>
                                </div>
                            </div>
                        </div>
)}

your fetch is just returning the data, are you trying to get the last item fetched ? because last child method won't do that — Mayur, Jan 03 '21 at 14:47
This method solves my problem.. [https://stackoverflow.com/questions/43441856/how-to-scroll-to-an-element](https://stackoverflow.com/questions/43441856/how-to-scroll-to-an-element) — Shahariar Rahman Sajib, Jan 03 '21 at 15:48

score 2 · Answer 1 · answered Jan 03 '21 at 14:47

You don't need to use last child. It is also not the best solution in React to use tools to get an element by selector.

Just set the parent element's scrollTop to its height. It looks like this:

ref.current.scrollTop = ref.current.scrollHeight;

And this ref should point to your parent component in which this code is wrapped:

{getComment.map(cmnt =>
  <div key={cmnt.comment_id} className="article-comments-reply">
      <div className="text-box" id="txt">
          <h3>{cmnt.username}</h3>
          <div className="reply-box">
              <h4>{cmnt.comment_text}</h4>
          </div>
      </div>
  </div>
)}

If you want to add scrollBehavior via js, you can use something like this:

ref.current.style.scrollBehavior = 'smooth';

As a result, it can be easily transferred into a custom hook that can perform smooth scrolling on any element.

Custom hook useScrollToBottom.

export const useScrollToBottom = (ref) => {
  const scrollToBottom = () => {
    ref.current.style.scrollBehavior = 'smooth';
    ref.current.scrollTop = ref.current.scrollHeight;
  };

  return {
    scrollToBottom,
  }
}

Using

// ...
const ref = useRef();
const {scrollToBottom} = useScrollToBottom(ref);

useEffect(() => {
  // scroll when you need
  scrollToBottom();
}, []);

return (
  <div ref={ref} className="list">
    {
      // some elements
    }
  </div>
)
// ...

TypeError: Cannot read property 'style' of undefined. I get this error. — Shahariar Rahman Sajib, Jan 03 '21 at 15:30
@ShahariarRahmanSajib, try this codesandbox: https://codesandbox.io/s/hungry-grass-l461g?file=/src/App.js — xom9ikk, Jan 03 '21 at 16:01

score 0 · Answer 2 · edited Aug 18 '22 at 17:01

0

You can use this function from any component you want this code will target your last child.

const scrollToBottom = () => {
    let targetLastElement = document.getElementsByClassName('classNameOfTileWhichYouWantToTarget');
    targetLastElement = targetLastElement[targetLastElement.length - 1]
    targetLastElement.scrollIntoView({ behavior: "smooth" });
  }

edited Aug 18 '22 at 17:01

vimuth

5,064
33
79
116

answered Aug 16 '22 at 06:13

umer awan

1

How to go to last element in react?

2 Answers2