/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 vote231 views1 answer
When reload the page the route gone in react js laravel
Javascript React
2 votes199 views1 answer
Display image as big as possible react native
Javascript React
-1 vote209 views1 answer
How to insert divider in react native
Javascript React
15 votes178 views5 answers
Usestate react hook
Javascript React
32 votes153 views4 answers
React update state array of objects
Javascript React
21 votes176 views6 answers
React native vector icons
Javascript React
4 votes207 views2 answers
How to skip the undefined values from the list and filter the rest of the data in react js
Javascript React
0 vote202 views1 answer
React native navigate two screens back
Javascript React
1 vote193 views1 answer
Error: open failed: EACCES (Permission denied) react native
Javascript React
0 vote198 views1 answer
React link onclick refresh page
Javascript React