Getting error as 'Cannot read property scrollIntoView of null' when used scroll down code

Question

The above error frequently occurs with the following code

 const [consumerMessages, setConsumerMesssages] = useState([])

 const messagesEndRef = useRef(null);

 const scrollToBottom = () => {
        messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
      };
 
useEffect(() => {
        scrollToBottom()
      }, [consumerMessages]);

Following is the codesandbox link: https://codesandbox.io/s/sleepy-nobel-kt87m

Why this error is occuring and WHat could be the appropriate solution?

Drew Reese · Accepted Answer · 2021-03-07 07:17:45Z

3

Issue

Basically on the initial render the ref hasn't been attached to the DOM node as the current ref value and so messagesEndRef.current isn't defined yet.

Solution

Use a null check:

messagesEndRef.current &&
  messagesEndRef.current.scrollIntoView({ behavior: "smooth" });

Or using Optional Chaining Operator (?.):

messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });

Demo

answered Mar 7, 2021 at 7:17

Drew Reese

207k19 gold badges280 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Pranav Over a year ago

OK error is gone, but, why new error 'Invalid attempt to spread non-iterable instance. In order to be iterable, non-array objects must have a [Symbol.iterator]() method.'

Drew Reese Over a year ago

@Pranav I don't see that error in your or my sandbox. Is that something to do with textMessages or updating that state? It's the only array I see. Did that error just appear after fixing the ref access or are you doing something to trigger it? I see that you've an useEffect that loads some messages from local storage, this can possibly set your state to undefined if there is no localStorage with that key.

Drew Reese Over a year ago

@Pranav Yeah, I suspected as much and tried the "send message" button. I see you load from localStorage, but if the localStorage has never been used you set your textMessage state to undefined. Also, when saving to localStorage you need to JSON.stringify it, and then JSON.parse it when reading back out.

Drew Reese Over a year ago

@Pranav I'm not quite sure what you mean by "last message is going so deep", but if you are referring to the messages list going behind/underneath the input "bubble" yes, this seems very much CSS. If not this can you clarify what is "deep"?

Drew Reese Over a year ago

Let us continue this discussion in chat.

|

Collectives™ on Stack Overflow

Getting error as 'Cannot read property scrollIntoView of null' when used scroll down code

1 Answer 1

Issue

Solution

Demo

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Issue

Solution

Demo

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related