title: React auto scroll to bottom on a chat container
body: <p>I am trying to build a chat page using react. And I have obviously come to a problem where the chat bubbles container doesn't automatically scroll down to bottom on componentDidMount and Update. </p>
  
  <p>I was looking through the previous Q&amp;A but couldn't find any decent solution.</p>
  
  <p>Here is the comoponent.</p>
  
  <pre><code>// renders the text form and all the messages
  
  import React, { Component } from 'react';
  import { convo } from '../../data/convo';
  import SingleMessage from '../singleMessage/singleMessage';
  import StyledForm from './styles';
  import moment from 'moment';
  
  class MessageRoom extends Component {
  
  //convo contains the messages
      state = {
          convo,
          message: ''
      };
  
      handleChange = e =&gt; {
          const message = e.target.value;
          this.setState({ message });
      };
  
      onSubmit = e =&gt; {
          e.preventDefault();
          if (this.state.message) {
              const text = {
                  message: this.state.message,
                  owner: 0,
                  date: moment()
              };
  
              this.setState({ convo: [...this.state.convo, text], message: '' });
          }
      };
  
      render() {
          return (
              &lt;StyledForm&gt;
                  &lt;div className="messages"&gt;
                      {this.state.convo.map(text =&gt; (
                          &lt;SingleMessage text={text} key={text.date} /&gt;
                      ))}
                  &lt;/div&gt;
                  &lt;div&gt;
                      &lt;form
                          onSubmit={e =&gt; {
                              this.onSubmit(e);
                          }}
                      &gt;
                          &lt;input
                              type="text"
                              placeholder="Type a message"
                              value={this.state.message}
                              onChange={this.handleChange}
                          /&gt;
                          &lt;button type="submit"&gt; Send &lt;/button&gt;
                      &lt;/form&gt;
                  &lt;/div&gt;
              &lt;/StyledForm&gt;
          );
      }
  }
  
  export default MessageRoom;
  </code></pre>
  
  <p>So please help a brother out!</p>