Show react component given a condition

Question

I want to show the battery icon given the status provided in props. I am trying to keep it simple but without writing too much code, i.e.: . if ... else, switchs statements...

Below code snippet works but it kinda looks forced, not sure.

import {
 TiBatteryLow,
 TiBatteryMid,
 TiBatteryHigh,
 TiBatteryFull
} from 'react-icons/ti'
const battery = {
 low: {
 color: "text-red-500",
 icon: TiBatteryLow
 },
 mid: {
 color: "text-yellow-400",
 icon: TiBatteryMid
 },
 high: {
 color: "text-green-400",
 icon: TiBatteryHigh
 },
 full: {
 color: "text-green-600",
 icon: TiBatteryFull
 }
};
export default function BalanceIndicator({status}) {
 let Balance = battery[status].icon;
 return (
 <div className="text-sm flex items-center">
 <i className={`mr-3 text-2xl ${battery[status].color}`}><Balance /></i>
 </div>
 )
}

Is there a better way to do this? Perhaps conditional rendering?

PS: In title, by condition I mean the value of status.

• Kostiantyn Okhotnyk: little code. It is nice. All by Fowler ))

Answer 1

Prefer const over let

The variable Balance is declared with let.

let Balance = battery[status].icon;

It can be declared with const instead, since it is only assigned once. This can help avoid accidental re-assignment and other bugs.

Reducing lookups

let Balance = battery[status].icon;
return (
 <div className="text-sm flex items-center">
 <i className={`mr-3 text-2xl ${battery[status].color}`}><Balance /></i>
 </div>
)

With this approach the icon is stored in Balance yet the color needs to be looked up again. The icon and color could be stored in variables after a single look-up with destructuring assignment.

const {icon, color} = battery[status];
return (
 <div className="text-sm flex items-center">
 <i className={`mr-3 text-2xl color}`}><icon /></i>
 </div>
)

This makes the line containing the markup shorter, which improves readability.

Error handling

What happens if status does not correspond to a key in battery? Perhaps it is unlikely but as code grows over time the likelihood could grow. The code should handle this scenario - perhaps with an error message or exception thrown.

• Nestor: Nice catch with destructuring!