Could someone explain to me about the double {{}}}

JavaScript
1

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:

2

The outside curlies tell JSX to evaluate whatever is inside the curlies as a JS expression. So {styles} is JS which is just the object styles. I’m not quite sure why you would need curlies around styles since it is already an object? But I’m not an expert in React so maybe someone else can tell us both :slight_smile:

1 Like
3

Nested is just an object literal syntax. And in your example, invalid code, you don’t want to wrap styles.

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.