title: React PerfectScrollBar scroll at bottom of container for dynamically generated content
body: <p>I am using react perfectscrollbar <a href="https://www.npmjs.com/package/react-perfect-scrollbar" rel="nofollow noreferrer">https://www.npmjs.com/package/react-perfect-scrollbar</a></p>
  
  <p>I am trying to implement the chat feature where on clicked on user, the chat message is requested via ajax and placed in the DOM. Here, I want the container to be scrolled at bottom.</p>
  
  <p>I have implemented below code in react but it seems to be not working. Ant idea?
  Note: I have filtered the code and only pasted the related section. I have used the suggested method for scrollTop but it's not working.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> class Complain extends Component {
      constructor(props) {
          super(props);
          
          this.chatContainerRef = React.createRef();
  
      }
      
          viewComplain(e, id, name) {
          axios.get('/complain/' + id, {
  
          })
              .then(res =&gt; {
                  const chatmsg = res.data.data;
                  // let data = { msgdata: chatmsg, name: name, complainid: id };
                  this.setState({ chatmsg: chatmsg });
                  this.setState({ complainname: name });
                  this.setState({ activeChat: id });
                  this.setState({ complainRegNo: chatmsg[0].regno });
                  console.log(this.chatContainerRef);
                  this.chatContainerRef.current.scrollTop = 200;  // -&gt; this is not working
              })
              .catch(function (error) {
  
              });
      }
  
  render(
  return {
      
   &lt;PerfectScrollbar option={{ suppressScrollX: false }} ref={this.chatContainerRef}&gt;
         {
                this.state.chatmsg.map((post, i) =&gt; (
                    &lt;div key={i} className={(post.msg_creater === "school") ? "row flex-nowrap message-row contact p-4" : "row flex-nowrap message-row user p-4"}&gt;
                    &lt;img className="avatar mr-4" src="../assets/images/avatars/profile.jpg" alt="" /&gt;
                    &lt;div className="bubble"&gt;
                        &lt;div className="message"&gt;{post.msg}&lt;/div&gt;
                        &lt;div className="time text-muted text-right mt-2"&gt;{post.created_at}&lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
             ))
         }
        &lt;/PerfectScrollbar&gt;
  })</code></pre>
  </div>
  </div>
  </p>