FrontendInterviews.dev

Loading problem…

30. WhatsApp Chat Interface

Easy•
Acceptance: 72.00%
•
🔓3/3 Pro unlocks today

Build a WhatsApp Chat Interface component in React that allows users to send and display messages.

Requirements

1. Message Display

  • Show a list of messages
  • Each message should display the text content
  • Messages should be displayed in chronological order (oldest first)
  • Show a visual distinction between sent and received messages

2. Input Box

  • Input field to type new messages
  • Send button to submit messages
  • Support Enter key to send messages
  • Clear input after sending

3. Message Structure

interface Message {
  id: number;
  text: string;
  sender: 'user' | 'other';
  timestamp: Date;
}

4. Layout

  • Messages container that scrolls
  • Input area fixed at the bottom
  • Clean, WhatsApp-like styling

Example Usage

// Initial messages
const initialMessages: Message[] = [
  { id: 1, text: 'Hey! How are you?', sender: 'other', timestamp: new Date() },
  { id: 2, text: 'I am doing great!', sender: 'user', timestamp: new Date() },
];

Constraints

  • Each message must have a unique ID
  • Handle empty input (don't send empty messages)
  • Use controlled components for input
  • Messages should scroll to bottom when new message is added
  • Distinguish between user and other messages visually