Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialkaran Badhwar
Web Development Techdegree Graduate 18,135 PointsWhy are we passing an Object to style tag?
Why are we passing an Object to style tag and how will I know in future if I need to pass an Object on specific properties. Is there any reason behind this? as we did in the
<li><NavLink exact to="/" activeStyle={{ color: blue }}>Home</NavLink></li>
Matthew Pantel
Front End Web Development Techdegree Graduate 27,089 Pointshey Karan Badhwar, great question and I'm sure you've found the answer but figured I'd post up what I found.
"In JSX, JavaScript expressions are written inside curly braces, and since JavaScript objects also use curly braces, the styling in the example above is written inside two sets of curly braces {{}}. "
Basically we need to write javascript inside the JSX, so we use the { }...then the color: blue is considered an object, so we have to use another set of { }.
for your second question as to when you'll know when to use objects on specific properties, I think it'll come with time and repetition of doing this type of inline styles within JSX. I'd say its fair to say that any inline styles you'd be using { }.
Here's the link I saw on W3Schools: https://www.w3schools.com/react/react_css.asp
Tyler McDonald
Full Stack JavaScript Techdegree Graduate 16,700 PointsTyler McDonald
Full Stack JavaScript Techdegree Graduate 16,700 PointsSpecifically, it's because React Router demands it (see React Router docs). But in general, it's because CSS styles are stored as objects with key:value pairs. The
key
being color, and thevalue
being blue in this case.