I have container with horizontal scrolling. When I click a button I want to scroll to the end of the container (all the way to the right).

My on click function:

const scrollToEnd = () => {
  var parent = document.getElementsByClassName('custom-class-name');
  for(var i=0;i<parent.length;i++) {
    var child = parent[i].getElementsByClassName('my-container');
    child[0].scrollLeft = 100;
  }
}

In my return function

<Button
  onClick={(e) => {
    anotherFunction();
    scrollToEnd();
  }}
/>

Nothing happens when I click the button. I tested to see if I am selecting the right element using a style:

child[0].style.color='red';

This works. Style color red is added to .my-container but scrollLeft does not work.