title: Keep an element scrolled to the bottom
body: <p>I am creating a &quot;log&quot; screen that updates periodically in React. To make sure that the latest addition is always in view I would like the element to always be scrolled to the bottom:</p>
  <p><a href="https://i.stack.imgur.com/tMXHL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tMXHL.png" alt="Example of what I want to acheive" /></a></p>
  <p>I have the overflow working:</p>
  <h1>CSS:</h1>
  <pre><code>div.log {
      height: 200px;
      overflow: auto;
  }
  </code></pre>
  <p>And the HTML:</p>
  <h1>JSX:</h1>
  <pre><code>render() {
  
      return (
  
              &lt;div className=&quot;log&quot;&gt;
                  &lt;ul&gt;
                      {this.props.log.map((log, i) =&gt;
  
                          &lt;li key={i}&gt;
                              {log.message}
                          &lt;/li&gt;
                      )}
  
                  &lt;/ul&gt;
              &lt;/div&gt;
  
      );
  }
  </code></pre>
  <p>Here is my entire component:</p>
  <h1>Javascript</h1>
  <pre><code>import React from 'react';
  
  export default class Log extends React.Component {
  
      constructor(props) {
  
          super(props);
  
      }
  
      render() {
  
          return (
  
                  &lt;div className=&quot;log&quot;&gt;
                      &lt;ul&gt;
                          {this.props.log.map((log, i) =&gt;
  
                              &lt;li key={i}&gt;
                                  {log.message}
                              &lt;/li&gt;
                          )}
  
                      &lt;/ul&gt;
                  &lt;/div&gt;
  
          );
      }
  
  }
  </code></pre>
  <p>This all works fine, but doesn't stay scrolled down. I understand that I can use something similar to:</p>
  <pre><code> var element = document.getElementByClassName(&quot;.log&quot;);
   element.scrollTop = element.scrollHeight;
  </code></pre>
  <p>But this only works once, I need to be scrolled to the bottom when the contents of &quot;.log&quot; updates.</p>
  <p>Any help is much appreciated.</p>