React · Exercise 6 of 6 Previous
Advanced
A chat that scrolls to the newest message
Build the send behaviour of this chat. When the form is submitted with text in the input (id="msg"):
add the text as a new <li> at the end of the list (id="log"), clear the input and keep the focus in it;
scroll the list so the new message is visible at the bottom. Right now the handler scrolls before React has added the new item, so it scrolls to the old last message.
Ignore empty or space-only messages. Use flushSync in the handler, or an effect that runs after the list changes.
What Check tests
- The chat starts with 7 messages
- Sending adds the message at the end and clears the input
- The new message is scrolled into view
- Focus stays in the input
- A second message is also scrolled into view
- Empty messages are ignored
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.