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

You can use the second argument of useEffect to tell it when to run ( by default it runs on each update ). I'd assume you want to pass level as your second argument based on your code, so that useEffect runs only when level is updated.

The format for using useEffect with a second arg is like so:

         useEffect(() => {
              console.log(state); 
              //value of state is used here therefore must be passed as a dependency
         }, [state])

Answer 2

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 = (marginColor) => StyleSheet.create({ container:{ backgroundColor: getBackgroundColor(), }