React .createClass() scroll to ref: scrollIntoView not a function

I’m having trouble figuring out what’s wrong when I’m trying to scroll to a “ref”. I’ve been searching like mad and found urls which make complete sense, but it won’t work in my scenario.

I have an app using react 15.4.2 along with react-router 3.0.0. I have a route to a component that takes an optional route parameter and am trying to use that to scroll to the element on componentDidUpdate(). I’ve tried implementing a couple different ways but in following the most recent implementation of ref.scrollIntoView() I get an error…

scrollIntoView is not a function

I made sure that the “ref callbacks” exist at the time of componentDidUpdate().

Am I just missing something like using .createClass() is missing methods you get when using a class definition or am I approaching this entirely wrong?

I could just jump to using a package, but things like this in not being able to understand what’s going on when being as native as I can bother me.

Code has been simplified to showcase the issue while maintaining a similar flow. There may be discrepancies in code syntax.

APP

const App = React.createClass({
    render() {
        return (
            <Router history={ appHistory }>
                <Route path='home' component={ Home }>
                    <IndexRoute component={ Page } />
                    <Route path='page(/:itemIndex)' component={ Page } />
                </Route>
                <Route path='add-new-item' component={ AddNewItem } />
            </Router>
        )
    }
});

HOME
is just a wrapper with a nav bar that renders children based on an active index

ADD NEW ITEM
is a component which will goto /page/[index of newly created item]

PAGE

const Page = React.createClass({
    getInitialState() {
        return {
            data: undefined,
            scrollTo: parseInt(this.props.params.goalIndex) || undefined
        };
    },

    componentWillMount() {
        // this gets data and does a setState for data
    },

    componentDidUpdate() {
        let { scrollTo } = this.state;

        if( scrollTo && this['item-' + scrollTo] ) {
            this['item-' + scrollTo].scrollIntoView();
        }
    },

    renderTiles() {
        return this.state.data.map( ( item, index ) => {
            return (
                <Item
                    key={ 'item-' + index }
                    ref={ node => this['item-' + index] = node }
                >
                    <p>foo bar...</p>
                </Item>
            )
        });
    },

    render() {
        return (
            <div>
                { this.state.data && this.renderTiles() }
            </div>
        );
    }
});

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

A nested React component with a ref is just that and not a DOM element with DOM element methods so Element methods will not be available.

To easily fix, you can wrap the React component in a standard DOM element and assign a ref to that.

renderTiles() {
    return this.state.data.map( ( item, index ) => {
        return (
            <div
                key={ 'item-' + index }
                ref={ node => this['item-' + index] = node }
            >
                <Item>
                    <p>foo bar...</p>
                </Item>
            </div>
        )
    });
},

Method 2

The concept from the accepted answer is specifically true for elements from UI frameworks such as Reactstrap, Semantic UI, Material UI, etc.

This is easily forgotten when they have the same names.

<Input> or <Form> in ReactStrap is not <input> or <form> !

Such a component with a ref is “not a DOM element with DOM element methods”, as the accepted answer indicates.


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x