Intermediate
A fresh draft for each contact
In this messenger, a draft typed for one contact stays in the box when you switch to another, so you might send it to the wrong person.
Make switching contacts reset the chat: the textarea #draft must be empty after you click a different contact button (.contact). The heading #to shows To: <name>.
Don't change Chat itself: tell React that each contact's chat is a different component.
What Check tests
- Typing a draft to Asha works
- Switching to Ravi shows an empty draft
- Switching back to Asha starts empty too
- Clicking the current contact again keeps the draft
Chatstill owns its draft state
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.