/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 vote340 views1 answer
React get current date minus 7 days
Javascript React
0 vote327 views1 answer
Create react app run test apecific folfer
Javascript React
0 vote336 views1 answer
POST http://localhost:3000/$(process.env.REACT_APP_API_URL)/auth/users/ 404 (Not Found) in react redux
Javascript React
33 votes356 views2 answers
UseRef react ref
Javascript React
0 vote364 views1 answer
11. Which of the following metals catch fire on reaction with air? A. Magnesium B. Manganese C. Potassium D. Calcium
Javascript React
0 vote351 views1 answer
Box-shadow: 0px 4px 8px rgba(164, 188, 223, 0.15); to react native
Javascript React
0 vote311 views1 answer
Making all makers to show in react native map
Javascript React
2 votes365 views4 answers
Date range picker react
Javascript React
1 vote396 views1 answer
React-native-infinite-scroll-with-flatlist
Javascript React
3 votes326 views2 answers
Get param is react
Javascript React