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

Posted by Sam Bartlett
Sam Bartlett
5,886 Points

Why does match get passed in as {match} compared to, for example, props which just gets passed in as props?

Ex. usually we do:

const SampleComponent = props => {};

but for match properties we have to do: const SampleComponent = {match} => {};

Why?

Sam Bartlett
Sam Bartlett
5,886 Points

This is for React using React Router.

1 Answer

Ari Misha
Ari Misha
19,323 Points
Ari Misha
Ari Misha
19,323 Points

Hiya there! In React, the data flow is unidirectional. The children functions(components) is unaware of state or data that their parent components possess. So how do you make 'em aware? Props comes to the rescue. the props is pretty much whatever the data you pass to the parent component, which later flows down to children components. Thats how it works in React.

Now match is something totally different than props. A "match" object contains information about how a <Route path> matched the URL. * **matchobject contains properties like *params, isExact, path and url. match object works for server-side rendering.

~ Ari

Sam Bartlett
Sam Bartlett
5,886 Points

Hiya Ari, thanks for the answer! Unfortunately, it doesn't really answer what I'm trying to understand.

There's a syntax difference here. With props we pass the props object as a normal variable - in more traditional js:

var component = function(props) { console.log(props) }

But match is different:

var component = function({match}) { console.log(match) }

I don't understand this syntax. In other places in react, we use {} to indicate an expression. But match is already a javascript object, why does it need to be passed as an expression? Is that actually what's happening here?

Ari Misha
Ari Misha
19,323 Points
Ari Misha
Ari Misha
19,323 Points

Hiya there! Maybe i misunderstood the question. {match} is newer syntax in JavaScript called destructuring. It pretty much means that you're calling the match object, which is an object in React Library. I think you're confused with this ES6 syntax. Post back if you still cant grasp the concept. (:

Sam Bartlett
Sam Bartlett
5,886 Points

Ari Misha thanks, that's exactly what I was trying to understand. I'm not familiar with the new destructuring concept. Are there any treehouse courses etc. that would cover this topic?

Ari Misha
Ari Misha
19,323 Points
Ari Misha
Ari Misha
19,323 Points

@SamBartlett There are a bunch of new syntaxes introduced in ES6. It still feels weird to be honest. Its like a completely different language lol. But these syntaxes make JavaScript more productive and powerful. You can find ES6 syntax blog here and Treehouse Track for ES6 here.

Sam Bartlett
Sam Bartlett
5,886 Points

Awesome, thank you for the links. I'll work on that track after I finish the react track then, I really appreciate you taking the time to answer me!

Ari Misha
Ari Misha
19,323 Points
Ari Misha
Ari Misha
19,323 Points

I would finish it right now if i were you 'coz its gonna be a lot harder without learning new ES6 syntax. The whole React library is written in ES6 syntax and future courses will be in ES6 syntax as well. So you're gonna encounter ES6 syntax one way or another.