how to scroll div to bottom zero when new message pop ups in react js

Question

I am building a chat application. Although everything is working perfectly fine. But the problem here is when user types new msg it goes below the chat display area and user have to manually scroll down to see the message. I want to know how can I resolve this issue in my app. so that when message is submitted the it appears immediately in the chat area.

Here is my code.

chatRoomPage.js

<Grid  item xs={12}>
                    <div style={{maxHeight: '500px', height: '500px',
                        position: 'fixed',width:'100%',
                        overflow: 'auto'}}>
                    {receivedMessage && receivedMessage.content &&
                    receivedMessage.content.map((item,index) => {
                        if(item.senderId === item.vendorId) {
                            return (
                            <ChatThread key={index} image={item.senderImage} right={true} content={item.content}/>
                            )
                        }else {
                        return (
                            <ChatThread key={index}  image={item.reciverImage} content={item.content}/>
                        )}
                    }) }
                    </div>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                </Grid>

This is the ui

Answer 1

One of the things you can do is to create a ref on the div which renders the chat messages. Upon submitting a chat message just do ref.current.scrollTop = ref.current.scrollHeight;

Code Snippet:

import React, { useState, useEffect, useRef } from "react";

const MessageContainer = props => {
    const [messages, setMessages] = useState([]);
    const ref = useRef();
    useEffect(() => {
        // api call get messages
        setMessages([...]);
    }, [messages])

    const submitMessage = () => {
        // post message to server
        ref.current.scrollTop = ref.current.scrollHeight;
    }

  return <>
        ... 
        <Grid  item xs={12}>
            <div ref={ref} style={{maxHeight: '500px', height: '500px',
                position: 'fixed',width:'100%',
                overflow: 'auto'}}>
            {receivedMessage && receivedMessage.content &&
            receivedMessage.content.map((item,index) => {
                if(item.senderId === item.vendorId) {
                    return (
                    <ChatThread key={index} image={item.senderImage} right={true} content={item.content}/>
                    )
                }else {
                return (
                    <ChatThread key={index}  image={item.reciverImage} content={item.content}/>
                )}
            }) }
            </div>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
        </Grid>
      <form onSubmit={submitMessage}>
        <input type='text'/>
        <button type='submit'>Submit</button>
      </form>
     ...
      </>
};

export default MessageContainer;