Okay, I figured it out but left the code as is so I could ask a question. Down on the div when you started there was a nested set of {{}}. I know there have been examples of that in previous things, but it will not work without it. Now i know it has something to do with how react is interpreting javascript and other things, but can someone explain and point me to the whats and whys?
**Your code so far**
const styles = {
color : 'purple',
fontSize: 40,
border: "2px solid purple"
};
// Change code above this line
class Colorful extends React.Component {
render() {
// Change code below this line
return (
<div style={{styles}}>Style Me!</div>
);
// Change code above this line
}
};
**Your browser information:**
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36
Challenge: Add Inline Styles in React
Link to the challenge: