How can I scroll a div to be visible in ReactJS?

Question

I have a popup list which is a div that contains a vertical list of child divs. I have added up/down keyboard navigation to change which child is

Answer 1

With reacts Hooks:

1. Import

import ReactDOM from 'react-dom';
import React, {useRef} from 'react';

2. Make new hook:

const divRef = useRef(null);

3. Add new Div

4. Scroll function:

const scrollToDivRef  = () => {
    let node = ReactDOM.findDOMNode(divRef.current) as Element;
    node.scrollIntoView({block: 'start', behavior: 'smooth'});
}