1import React, { useEffect, useRef } from 'react'
2
3const Messages = ({ messages }) => {
4
5 const messagesEndRef = useRef(null)
6
7 const scrollToBottom = () => {
8 messagesEndRef.current.scrollIntoView({ behavior: "smooth" })
9 }
10
11 useEffect(scrollToBottom, [messages]);
12
13 return (
14 <div>
15 {messages.map(message => <Message key={message.id} {...message} />)}
16 <div ref={messagesEndRef} />
17 </div>
18 )
19}
20