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 trial

JavaScript React Router 4 Basics Navigating, Nesting and Redirecting Routes Styling Active Links

karan Badhwar
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
karan Badhwar
Web Development Techdegree Graduate 18,135 Points
Posted by karan Badhwar
.a{fill-rule:evenodd;}techdegree seal-36
karan Badhwar
Web Development Techdegree Graduate 18,135 Points

Why 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>
Tyler McDonald
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Tyler McDonald
Full Stack JavaScript Techdegree Graduate 16,700 Points
Tyler McDonald
.a{fill-rule:evenodd;}techdegree seal-36
Tyler McDonald
Full Stack JavaScript Techdegree Graduate 16,700 Points

Specifically, 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 the value being blue in this case.

Matthew Pantel
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Matthew Pantel
Front End Web Development Techdegree Graduate 27,089 Points
Matthew Pantel
.a{fill-rule:evenodd;}techdegree seal-36
Matthew Pantel
Front End Web Development Techdegree Graduate 27,089 Points

hey 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