How to use styling with useRef hook?

I am trying to use useRef to move items of a component at the click of a button. I have tried the following code:

export const List: React.FC = () => {
  const listRef: any = useRef(null);
  const handleSliderClick = (direction: string) => {
    if (direction === "left") {
      console.log(listRef.current, "refff"); = `translateX(230px)`;
  return (
    <div className="movie-list">
      <span className="list-title">Continue to watch</span>
      <div className="wrapper">
          className="slider-arrow left"
          onClick={() => handleSliderClick("left")}

I am getting the error, ‘TypeError: Cannot read properties of null (reading ‘style’)’.
What is the correct way to use useRef?

>Solution :

Need to assign the ref to an element that you want to manipulate. eg

  <div className="wrapper" ref={listRef}>

Leave a Reply