react scrollTo is not a function

Question

I am new to the react. Here I have is a table which has some td, now on click of the button I add one more td in that table. Now, the table is also scrollable,so , what I want is that table scroll should be at top when we add a new row. So, that user will come to know easily that the row has been added .

I tried is ,

I have a container,

JobList.js

constructre(props){
    super(props);
    this.myRef = React.createRef();
}

componentDidMount() {
    if (this.state.operationType) {
      this.props.changeOperationType(this.state.operationType);
    }
    if (!this.props.jobs) {
      this.props.fetchUserJd();
    }
    this.myRef.current.scrollTo(0, 0);
  }


render() {
   return(
      <UserJobsTabel
              jobList={filteredList}
              sortAscending={this.sortData}
              sortCountAndScoreAscending={this.sortNumbersAscending}
              addNewRow={this.addNewRow}
              isRowAddingEditorVisible={this.props.isRowAddingEditorVisible}
              removeRow={this.removeRow}
              refer={this.myRef}/>
   )
}

UserJobsTable.js

<div className="table-responsive">
    <table>
    <thead>
     <tr className="text-center">
            <th></th>
            <th scope="col">Technology<i className="fa fa-fw fa-sort sort-icon"></i></th>
            <th scope="col">Total Resumes<i className="fa fa-fw fa-sort sort-icon"></i></th>
            <th scope="col">Job Title<i className="fa fa-fw fa-sort sort-icon"></i></th>
            <th scope="col">Total Score<i className="fa fa-fw fa-sort sort-icon"></i></th>
            <th scope="col">Average Score<i className="fa fa-fw fa-sort sort-icon"></i></th>
            <th></th>
          </tr>
</thead>
 <tbody className="text-center" ref={props.refer}>
 </tbody>
//remaining
   </div>

So, Here I am getting the error that scrollTo is not a function.

So, is there any way to do this ? Or what is it that I am doing wrong.

Where was `this.myRef` defined? To use the new ref system, in your constructor you have to call `this.myRef = React.createRef();` — dotconnor, Mar 18 '19 at 05:48
instead of calling `scrollTo` function assign `scrollTop` param. LIke `this.myRef.current.scrollTop = 0` — tanmay, Mar 18 '19 at 06:00
So, I added this and it worked. actually, on click of the add button in that I have to call this.myRef.current.scrollTop = 0. then it has scroll to top. — ganesh kaspate, Mar 18 '19 at 06:04
actually, I am passing refer as a props to the UserJobsTable.js where that tbody is — ganesh kaspate, Mar 18 '19 at 06:13
@ganesh see if `this.myRef.current.getNode().scrollTo(...)` works? — tanmay, Mar 18 '19 at 06:15

score 1 · Answer 1 · answered Jul 25 '20 at 15:01

1

use this.myRef.current?.getNode().scrollTo({ x: 0, y: 0})

answered Jul 25 '20 at 15:01

Anish Yadav

191
1
4

score 0 · Answer 2 · answered Mar 18 '19 at 06:35

0

can you please try to change ref={props.refer} from tbody to the div of table? like this : <div className="table-responsive" ref={props.refer}>

as far i know react's scroll to works with div or it needs some plugins like jquery oe window

anyway you can also try this (in the last case fyi this is not a good option): document.body.scrollTo()

for further reference: JavaScript scrollTo method does nothing?

answered Mar 18 '19 at 06:35

Megha Brahmbhatt

61
1
4

that's why the last option would be document.body.scrollTo() – Megha Brahmbhatt Mar 18 '19 at 06:45

score 0 · Answer 3 · answered Mar 18 '19 at 07:04

0

because this.myRef get the instance of UserJobsTabel. You can forwarding refs instead.

https://reactjs.org/docs/forwarding-refs.html

answered Mar 18 '19 at 07:04

喝茶的螃蟹

134
6

react scrollTo is not a function

3 Answers3