Build a bell icon with an unread-count badge.
01
01
Understand the problem
ReactUIBadge
02
02
Attempt it yourself
Sketch your approach before reading the solution — that's what interviews test.
Stuck? AI Nudge Available
Get a conceptual hint to guide your logic without spoiling the final implementation.
03
03
Study the solution
Solve in
The solution is waiting
Give it an honest attempt first — then compare your thinking with the full walkthrough.
04
04
React solution
Complete solutionRun Playground
import React, { useState } from 'react';
import NotificationBadge from './src/NotificationBadge';
export default function App() {
const [unreadCount, setUnreadCount] = useState(0);
const incrementCount = () => {
setUnreadCount(prevCount => prevCount + 1);
};
const resetCount = () => {
setUnreadCount(0);
};
return (
<div style={{ fontFamily: 'sans-serif', textAlign: 'center', padding: '20px' }}>
<h1>Notification Badge Demo</h1>
<NotificationBadge count={unreadCount} />
<p>Current unread count: {unreadCount}</p>
<button onClick={incrementCount} style={{ margin: '5px', padding: '10px 15px' }}>
Add Notification
</button>
<button onClick={resetCount} style={{ margin: '5px', padding: '10px 15px' }}>
Clear Notifications
</button>
</div>
);
}05
05
Join the discussion
Discussion (0)
Sign in to join the discussion.
No responses yet. Be the first to share what you think.