/Javascript/React/React scroll to bottom of div

React scroll to bottom of div

import React, { useEffect, useRef } from 'react'

const Messages = ({ messages }) => {

  const messagesEndRef = useRef(null)

  const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
  }

  useEffect(() => {
    scrollToBottom()
  }, [messages]);

  return (
    <div>
      {messages.map(message => <Message key={message.id} {...message} />)}
      <div ref={messagesEndRef} />
    </div>
  )
}

Source: stackoverflow.com

Similar codes

0 vote247 views1 answer
How to disable RectButton from react-native-gesture-handler
Javascript React
0 vote296 views3 answers
Redirect is not defined react/jsx-no-undef
Javascript React
2 votes231 views1 answer
React native navigation hide navbar
Javascript React
0 vote237 views1 answer
React native text input right
Javascript React
18 votes249 views4 answers
React get route params
Javascript React
0 vote230 views3 answers
Django send and receive image data to react
Javascript React
5 votes240 views1 answer
Import react dom
Javascript React
4 votes234 views1 answer
React router external link
Javascript React
0 vote245 views1 answer
Npm ERR! peer react@"^15.x.x" from [email protected]
Javascript React
18 votes237 views6 answers
Uselocation react
Javascript React