CODEWITHSUNDEEP
reactjsjs-scrollintoview
cebo
cebo

Reputation: 818

React: Given a 'key', scroll the element with that key (from array.map) into view

I have an array of text that I am iterating through with the array.map() function to create <li> elements containing the text. The text comes with a unique id value which I am using as the key value that React requires inside maps. The loop looks like this (don't mind the html set, this is all temporary stuff that will be replaced):

{data.map(e => (
    key={e.id} dangerouslySetInnerHTML={{__html: e.ascii}}/>
))}

What I would like is that after this component is finished rendering (ie. after these <li>'s are created) that the page will automatically scroll into view a specific one of these elements given the same e.id value passed in as a prop to the component containing that code.

I know about the regular Element.scrollIntoView() function in the base DOM functionality but I am unsure how I would use that in conjunction with the React I already have. Where, if at all, should I be calling that function (presumably in componentDidMount?) and how can I get the element with the given key from the array that I mapped in order to pass it into that scroll function?

Upvotes: 1

Views: 317

Answers (0)

Related Questions