How do I conditionally render the color of my component based on the prop?

Question

The color of my component changes based on the value of the prop 'level'. When I tried using states to set the backgroundColor I realized that all the components have the same color as the state keeps changing for every comment. I tried using references and states both to solve this however, I haven't been able to work out the problem as the code seems to work the same. Any help would be great, thanks.

function CommentMargin({level}) {


const [marginColorState, setMarginColorState] = useState(colors.lightPurple);
const marginColor = useRef(null);

useEffect(() =>
    {   
        switch (level) {
            case 1:
                
                setMarginColorState(colors.lightPurple);
                marginColor(marginColorState);
        
            case 2:
                
                setMarginColorState(colors.crimson);
                marginColor(marginColorState);

            case 3:
                
                setMarginColorState(colors.orange);
                marginColor(marginColorState);

            case 4:
                
                setMarginColorState(colors.yellow);
                marginColor(marginColorState);

        }



    }


)


return (
    <View style={styles(marginColor).container}>

    </View>
);

}

export default CommentMargin;
const styles = (marginColor) => StyleSheet.create({
    container:{
        backgroundColor: marginColor.current,
        }

Answer 1

I would remove the state, useEffect, and ref, as they are overcomplicating the component.

Instead, set the background color based on the value of level. The best way is similar to what you did in the useEffect but put it into a regular function instead.

Something like:

const getBackgroundColor = () =>{
        switch (level) {
          case 1:
            return colors.lightPurple
          case 2:
            return colors.crimson
          case 3:
           return colors.orange
          case 4:
            return colors.yellow
      }
}

const styles = () => StyleSheet.create({
    container:{
        backgroundColor: getBackgroundColor(),
}