React horizontal scrollbar

Question

Really new to React, so forgive me if this is on page 1 of the book...

I've got a small drag and drop sample working in React. I can drag a

<div>

from the bottom of my page into a "target"

<div>

up the top. The drop handler modifies the state and the dropped element appears in the target.

All dropped elements appear in the target one after another, horizontally.

And there is the problem: I want the target div to scroll all the way to the right to show me the one I just dropped.

I added some code to my drop handler that found the target (via refs) and set

scrollLeft

to a big number. It causes a scroll, but never to the end. I'm assuming that is because I'm setting

scrollLeft

on the element before it has been rendered with the new state, and so it is set to the "previous maximum".

Can anyone point me in the right direction?

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

this.setState accepts a second optional parameter which is callback that runs after the render has completed.

For example,

this.setState({ /* your state */ }, function() { 
    ... 
    this.refs.yourRef.scrollLeft = /* someValue */;
});

React horizontal scrollbar

Sign up