Scrolling to specific element (after map some data) React

Question

I tried to use ref, but it's not working - scroll only to the bottom of website. I looked everywhere and found no solution, only for list items without map method.

data = [
{id:1, name: "Paul"},
{id:2, name: "Judy"},
{id:3, name: "Thomas"},
]

class NamesList extends Component {

myRef = React.createRef()  
scrollToMyRef = () => window.scrollTo(0, this.myRef.current.offsetTop)

return(
<div>
<ul>
{data.map(user => 
<li key={user.id} onClick={this.scrollToMyRef}>{user.name}</li>
}
</ul>

///CONTENT

<ul>
{data.map(user => 
<li key={user.id} ref={this.myRef}>{user.name}</li>
}
</ul>
</div>
)
}

On these thread you can find your answer https://stackoverflow.com/questions/11715646/scroll-automatically-to-the-bottom-of-the-page — Daniel Bistuer, Mar 19 '21 at 09:42
thanks, but unfortunately the solution i'm looking for isn't there — Marek Karwat, Mar 19 '21 at 09:47
if you need only to scroll for a specific element, then how would you determine that element. Please state that. After then answer can be given properly. — Nimna Perera, Mar 30 '21 at 10:06

score 0 · Answer 1 · answered Mar 26 '21 at 12:03

Try this code. Here I added a blank div inside the ul and gave the reference to it.

///CONTENT

<ul>
{
data.map(user => 
<li key={user.id}>{user.name}</li>
}
<div ref={this.myRef} />
</ul>

And Change the scrollToMyRef() as follows.

const scrollToMyRef() = () => this.myRef.current.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'nearest' });

Scrolling to specific element (after map some data) React

1 Answers1