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 e 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();
}

ponentDidMount() {
    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.

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 e 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();
}

ponentDidMount() {
    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.

• javascript
• reactjs
• redux
• scroll
• react-redux

• Where was this.myRef defined? To use the new ref system, in your constructor you have to call this.myRef = React.createRef(); – dotconnor Commented Mar 18, 2019 at 5:48
• I have added it in the constructor – ganesh kaspate Commented Mar 18, 2019 at 5:56
• I have @dotconnorupdated the questtion – ganesh kaspate Commented Mar 18, 2019 at 5:57
• @tanmay sorry I did not get you – ganesh kaspate Commented Mar 18, 2019 at 5:58
• instead of calling scrollTo function assign scrollTop param. LIke this.myRef.current.scrollTop = 0 – tanmay Commented Mar 18, 2019 at 6:00

3 Answers 3

use this.myRef.current?.getNode().scrollTo({ x: 0, y: 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?

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

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