I dislike that {{ backgroundColor: {color} }}
is incorrect, but {{ backgroundColor: color }}
is correct.
Up to this point, we were trained that in JSX, a prop needs to be wrapped in a pair of brackets, but suddenly, when it comes to putting an inline style in JSX, the prop shouldn’t be wrapped in a pair of brackets. Yes, AI gave me the hint, but at least give us such an example in the lesson on inline styling.
Your code so far
code removed by moderator
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/150.0.0.0 Safari/537.36 Edg/150.0.0.0
Congratulations on solving the challenge! You should be proud of your achievement…we are! But we are removing your working solution, so it is not available to others who have not yet done the work to get there. Again, congrats!
When you write {{ backgroundColor: color }}, the outer braces indicate a JavaScript expression in JSX, while the inner braces define a JavaScript object literal.
So, when you write this:
you are giving to the property backgroundColor the value of an object, as the shorthand {color} becomes the object { color: color }
So, {{ backgroundColor: {color} }} is wrong because it’s equivalent to {{ backgroundColor: { color: color } }}