Scroll to a particular div using id in reactJs without using any other library

Question

Scroll to a particular div using id in react without using any other library, I found a few solutions they were using scroll libraries

here's the div code in my WrappedQuestionFormFinal component

 <div className="form-section">
            <Row>
              <Col xs={24} xl={4} className="form-section-cols">
                <h3 id={id}>
                  {t('QUESTION')} {t(id + 1)}
                </h3>
              </Col>
             </Row>
 </div>

it's a nested component called through this component here

      <WrappedQuestionFormFinal
        allQuestions={questions}
        updateScreenTitle={this.props.updateScreenTitle}
        handleDeleteQuestion={this.handleDeleteQuestion}
        question={questions[q]}
        dublicateQuestion={dubQuestion}
        dependantQuestion={dependant}
        id={i}
        key={i}
        tags={this.props.tags}
        changeOrder={this.changeOrder}
        changeScreenNo={this.changeScreenNo}
      />,

the problem I'm facing is this form has around 10 questions and in case of submission when error occurs I've to scroll the page where error occurs. the Id is given to h1 tag which is unique

Solution 1

I use a react ref and element.scrollIntoView to achieve this.

class App extends Component {
  constructor(props) {
    super(props);
    this.scrollDiv = createRef();
  }

  render() {
    return (
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <button
          onClick={() => {
            this.scrollDiv.current.scrollIntoView({ behavior: 'smooth' });
          }}
        >
          click me!
        </button>
        <h2>Start editing to see some magic happen!</h2>
        <div ref={this.scrollDiv}>hi</div>
      </div>
    );
  }
}

Here's a sample codesandbox that demonstrates clicking a button and scrolling an element into view.

Solution 2

Have you tried using Ref?

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

handleScrollToElement(event) {
  if (<some_logic>){
    window.scrollTo(0, this.myRef.current.offsetTop);
  }
}

render() {

  return (
    <div>
      <div ref={this.myRef}></div>
    </div>)
}

Comments

[AnthonyT]

This seems to only work for div's that are rendered as part of the same component. For divs in other components, the page just refreshes.

[Ant]

if (<some_logic>){ How would I make this scroll to one element by clicking on another?

[kahlan88]

<button onClick={handleScrollToElement}>Click here</button>