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

Just in case someone stumbles here, I did it this way

  componentDidMount(){
    const node = this.refs.trackerRef;
    node && node.scrollIntoView({block: "end", behavior: 'smooth'})
  }
  componentDidUpdate() {
    const node = this.refs.trackerRef;
    node && node.scrollIntoView({block: "end", behavior: 'smooth'})
  }

  render() {
    return (

      

        {messages.map((msg, index) => {
          return (
            some test text
*/}
            
          )
        })}

        

      
    )
  }

scrollIntoView is native DOM feature link

It will always shows tracker div