/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

1 vote324 views3 answers
Antd react
Javascript React
0 vote404 views1 answer
Remove duplicate value from map react js
Javascript React
0 vote377 views1 answer
React live chat widget
Javascript React
21 votes389 views5 answers
How to add a shadow react native
Javascript React
2 votes369 views2 answers
Add 2 class names react
Javascript React
0 vote376 views5 answers
React native cache clear
Javascript React
0 vote376 views1 answer
Add event listener react hooks
Javascript React
8 votes391 views1 answer
React.Fragmen
Javascript React
0 vote396 views1 answer
Center child components in react
Javascript React
0 vote372 views2 answers
How to make a search bar in react django
Javascript React