javascript / beginner
Snippet
Branching UI Output Based on Status String Types
Switch statements evaluate a value against multiple branch cases. Comparing string datatype values allows components to return different JSX view branches cleanly according to domain status states.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import React from 'react';function StatusBadge({ status }) {switch (status) {case 'online':return <span className="badge green">Active Now</span>;case 'offline':return <span className="badge gray">Disconnected</span>;case 'busy':return <span className="badge red">Do Not Disturb</span>;default:return <span className="badge">Unknown Status</span>;}}
react
Breakdown
1
switch (status) {
Starts control flow branching against the string passed through the status prop.
2
default:
return <span className="badge">Unknown Status</span>;
Provides a fallback UI branch when an unexpected or unsupported value type is encountered.