I am facing an issue with the color of my component changing based on the value of the prop 'level'. Despite using states to set the backgroundColor, all components end up having the same color due to the state being altered for every comment. I have attempted to use both references and states to resolve this problem, but so far, the code continues to function in the same manner. Any assistance on this matter would be greatly appreciated. Thank you.
function CommentMargin({level}) {
const [marginColorState, setMarginColorState] = useState(colors.lightPurple);
const marginColor = useRef(null);
useEffect(() =>
{
switch (level) {
case 1:
setMarginColorState(colors.lightPurple);
marginColor.current(marginColorState);
case 2:
setMarginColorState(colors.crimson);
marginColor.current(marginColorState);
case 3:
setMarginColorState(colors.orange);
marginColor.current(marginColorState);
case 4:
setMarginColorState(colors.yellow);
marginColor.current(marginColorState);
}
}
)
return (
<View style={styles(marginColor).container}>
</View>
);
}
export default CommentMargin;
const styles = (marginColor) => StyleSheet.create({
container:{
backgroundColor: marginColor.current,
}