scrollIntoView using React refs

Question

We are trying to scroll to a specific component when the user closes another component.

Our example is very similar to that down below, taken from https://reactjs.org/docs/refs-and-the-dom.html#exposing-dom-refs-to-parent-components

function CustomComponents(props) {
  const items = [1,2,3,4].map((x, i) => return (
    <div ref={props.inputRef} key={i}>
     x + hello
    </div>
  )

  return (
    <div>
      { items }
    </div>
  );
}

function Parent(props) {
  return (
    <div>
      <CustomComponents inputRef={props.inputRef} />
    </div>
  );
}


class Grandparent extends React.Component {
  render() {
    return (
      <Parent
        inputRef={el => this.inputElement = el}
      />
    );
  }
}

We are rendering a big list of cards and want to be able to scroll to a specific card by calling this.refs[elem].scrollIntoView()

But our problem is that calling this.refs returns an empty object at all levels, and so we are unable to attach to a specific element and then fire it when the user arrives back to view this component.

Would like some help on how one would go about solving this issue.

My real example, I am not using functional components at any level. — Sohil Pandya
– Sohil Pandya, Commented Dec 13, 2017 at 18:08
when you assign ref using callback function, you no longer access it using this.refs, rather the class variable name, like this.inputElement — Shubham Khatri
– Shubham Khatri, Commented Dec 13, 2017 at 18:15
@ShubhamKhatri thanks for that, turns out our brains were dead, we looked at your comment and that really helped us. — Sohil Pandya
– Sohil Pandya, Commented Dec 14, 2017 at 16:12

claireinez · Accepted Answer · 2017-12-14 00:58:44Z

1

Where are you trying to call this.refs[elem].scrollIntoView()? You should be working with refs inside componentDidMount or componentDidUpdate, not inside the render method.

answered Dec 14, 2017 at 0:58

claireinez

394 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sohil Pandya Over a year ago

Yeah, we were already trying to do that without any luck, managed to fix it though! :)

Sohil Pandya · Accepted Answer · 2017-12-14 16:17:57Z

1

I've solved my specific issue by providing an if statement written below in my Grandparent component.

inputRef={el => { 
  if (el && el.id == this.state.selectedBuildingRef) {
    this.myelement.scrollIntoView();
    window.scrollBy(0, -65);
  } 
}}

answered Dec 14, 2017 at 16:17

Sohil Pandya

7551 gold badge7 silver badges19 bronze badges

Collectives™ on Stack Overflow

scrollIntoView using React refs

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related