Applying dynamic styles and className in React

Scenario

Context A status badge component must change its background color depending on the status value (success, warning, error). The Problem The team is using inline style objects with hard-coded color strings, making theming and maintenance difficult. Constraints Use a mapping object to associate each status to a CSS class name. Apply the class dynamically via className. Do not use inline styles. Expected Deliverable A React component that applies dynamic CSS class names based on a prop value using a mapping object, without relying on inline styles.

Targeted skills