Making div scroll from within Reactjs

Question

I'm new to react, I would like a div to scroll up as it starts to overflow, and I am trying to do it the proper way with react, but can't seem to figure it out.

I have the following in my render method:

render:function(){

    return (
      <div className="main">
        <div className="title">talkin folk</div>
        <div className="chatBox">
          <div className="chatRooms">
            <p className="large">rooms</p>
            {this.arrayOfRooms}
          </ div>
          <div className="typingBox">
            <div ref='dialog' key='dialog' className="dialog"> // div to scroll
              {this.arrayOfMsgToRender}
            </div>
            <div className="userType">
              <input
                type="text"
                placeholder="You:"
                label="email"
                value={this.state.msg}
                onChange={this.handleInput}
              />
            <input id="doneButton" type="submit" value="send" onClick={this.handleSend} />
            </div>
          </ div>
        </ div>
      </ div>
    );
  }

In the above code, it is the div dialog, that I would like to have scroll up automatically as it starts to overflow.

I tried to do something like:

componentDidUpdate: function() {
  var node = this.getDOMNode('dialog');
  node.scrollTop = node.scrollHeight;
},

But that wont work

have you tried this.refs.dialog? since 'dialog' is a div and not a react custom element, you don't need to use this.getDOMNode. this article might help. — user3200167
– user3200167, Commented Apr 11, 2016 at 1:14
hi fzxt, you where right this.refs.dialog worked, could you use that as an answer below, and I will accept it. Thanks a bunch — Daver Muzaffar
– Daver Muzaffar, Commented Apr 11, 2016 at 1:20

user3200167 · Accepted Answer · 2016-04-11 05:23:41Z

1

In order to access a DOM node within a react component, you can do something like this:

say you have a <div ref = "hello">Hello World.</div>

You can access this DOM node in react via: this.refs.hello.

The only thing you have to watch out for is this ONLY works for HTML elements, not React elements. For React elements, you need to use this.getDOMNode(this), and work through it.

answered Apr 11, 2016 at 5:23

user3200167

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Making div scroll from within Reactjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related