I am currently working on developing a chat application for my school project, and I would like to implement the feature that automatically scrolls to the bottom of the chat window. Despite trying various solutions and encountering React errors, I have not been able to achieve the desired functionality. Since I am new to React, there may be some mistakes in my code that I am unaware of. Below is a snippet of what I have implemented so far:
class Messages extends React.Component {
updateScroll() {
let element = document.querySelector(".messages");
element.scrollTop = element.scrollHeight;
}
render() {
const messages = store.getState().messages.map((msg) => {
this.updateScroll();
return (
<Message
name={msg.displayName}
message={msg.text}
time={msg.timestamp}
pic={msg.pic}
key={msg.timestamp}
clas={msg.who}
/>
);
});
return (
<div className="messages">
<div className="chat">
</div>
<div className="sendMessage">
<input
type="text"
placeholder="Message epic channel"
className="pendingMessage"
onKeyPress={this.handleKeyDown}
/>
<button onClick={this.handleMessageSend}>Send</button>
</div>
</div>
);
}
}
export default Messages;
If you would like to access the full code, you can visit my GitHub repository at the following link: https://github.com/dougalcaleb/react-chat-app
Thank you!