Understanding ({var}) notation and arrow function React Native

Question

I'm new to React Native and ES6, but know a little about JS and I'm having difficulty finding out what the following code means. I know what it does and I can identify bits of it, but not everything.

  static navigationOptions = ({ navigation }) => {
    if (navigation.state.params == undefined )
    {
      return {
        headerTitle: <Text></Text>,
        headerLeft: null
      }
    }
    else
    {
      return {
        headerTitle: navigation.state.params.toolbarComponent,
        headerLeft: null
      };
    }
  };

Now I know about the arrow function, that's fine, but I'm really confused about where the navigation variable is coming from. If I remove the braces so the first line looks like this:

static navigationOptions = ({ navigation }) => {

Then the code complains about prop not existing, so I assume this uses a bind on navigation.

So really what I can't work out is where navigation is coming from, i.e. in another example somewhere else how will I know what the variable name is called. And if you can confirm what the braces do around the variable navigation then I would appreciate it. I suspect this is really an ES6 question.

Why don't you just run the code through babel and look at the output? It's a lot easier than googling for syntax. — Jared Smith
– Jared Smith, Commented Mar 15, 2018 at 12:52
Because I'm an Android/Java developer and I'm starting to port my app to React, and I didn't know what was a thing... thanks I'll have a go at that. Much appreciated. — Rich Shepard
– Rich Shepard, Commented Mar 15, 2018 at 13:13
Yup. They have an online compiler you can use to look at small stuff without going through the rigamarole of a build process or CLI tools. — Jared Smith
– Jared Smith, Commented Mar 15, 2018 at 13:15
Great, thanks again. I did start trying to install the CLI, but saw your comment before actually trying to use it. Lots of learning to do for me I think. — Rich Shepard
– Rich Shepard, Commented Mar 15, 2018 at 13:29
No worries. You may come to appreciate JavaScript's syntactic shortcuts vs. Java's regularity once you get used to them. — Jared Smith
– Jared Smith, Commented Mar 15, 2018 at 14:02

Abhishek · Accepted Answer · 2018-03-15 12:47:56Z

3

static navigationOptions = ({ navigation }) => {

^ this is destructuring assignment. So for example you call navigationOptions function with object argument something like

navigationOptions({navigation:navigation, somethingElse: somethingElse})

then it will pick navigation from passed object.

Read more about destructuring here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

Here is another good post about this http://wesbos.com/destructuring-objects/

Also check Destructuring objects as function parameters in ES6

edited Mar 15, 2018 at 12:47

answered Mar 15, 2018 at 11:54

Abhishek

1,7242 gold badges16 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

SmoggeR_js Over a year ago

It would be like to access to the 'navigation' attribute of the passed object don't?

Rich Shepard Over a year ago

Thanks for that. Really helpful, having what it is named is half the battle, however after reading about it I suspect I have some really basic misunderstanding of what's going on. So destructuring is pulling data from a more complex object so: let {a}={a:1,b:2}; Means that a=1. I don't see where the right side of the static assignment is pulling an object that contains navigationOptions.. Of course there's where you can use destructuring with a function, but navigationOptions doesn't appear to exist in the class before hand, nor do I know where the navigation comes from.

Jared Smith Over a year ago

@RichShepard navigationOptions is a class method of whatever class (you omitted it in the code provided, I'm assuming its a React component), and it expects to be passed an object that has a navigation property as a parameter, which it then destructures into a local variable of the same name.

Abhishek Over a year ago

Also keep in mind in Javascript you don't need to declare variable like in Java and other languages. In JS if you do x=1 then variable x is declared automatically.

Abhishek Over a year ago

so if the navigation property is there in passed object then it will be assigned other it will be undefined.

|

Collectives™ on Stack Overflow

Understanding ({var}) notation and arrow function React Native

1 Answer 1

9 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Related