Note to add conditional code in the wrong spot.

[saranderson13]

This is minor, but just a bit misleading. In the provided code, the comment in the ColorBox component that says where to put your conditional statement is inside the return statement. It's also inside the div, which is again misleading because in the provided code the opacity value is explicitly stated, when it should really be a prop. To successfully have any conditional statement, it should be outside of the return, and offer a return option for each outcome.

Current starting code:
render() { return ( <div className="color-box" style={{opacity: 2}}> {/* your conditional code here! */} </div> ) }

Less misleading starting code:
render() { if ( {/* your conditional statement here! */} ) { return ( <div className="color-box" style={{ /* reference to opacity */ }}> {/* code to run if conditional is met */} </div> ) } else { return ( {/* code to run if it is not met */} ) } }

Or idk, maybe it doesn't need to be so explicit as to lay out the if statement entirely. It is (almost) a regular JS if statement with conditional returns, which was covered in the last unit. But since there are some differences between JSX and vanilla JS, putting a comment to specifically add the conditional inside both the return and the div is confusing because it could appear to be one of those differences to someone that is new to React.