Javascript - React - Arrow Function Usage Understanding

Question

I'm trying to wrap my head around how this is coded

https://github.com/ReactTraining/react-router/blob/dc2149ec0c63bfc95b71e40c81431e34cfbfeda9/packages/react-router-dom/modules/NavLink.js#L8

const NavLink = ({
  to,
  exact,
  strict,
  activeClassName,
  className,
  activeStyle,
  style,
  isActive: getIsActive,
  ...rest
}) => (
  <Route
    path={typeof to === 'object' ? to.pathname : to}
    exact={exact}
    strict={strict}
    children={({ location, match }) => {
      const isActive = !!(getIsActive ? getIsActive(match, location) : match)

      return (
        <Link
          to={to}
          className={isActive ? [ activeClassName, className ].join(' ') : className}
          style={isActive ? { ...style, ...activeStyle } : style}
          {...rest}
        />
      )
    }}
  />
)

What's going on here? Is this defining a function that returned a JSX element? The only thing that is throwing me is the JSX element being wrapped in parentheses ()

What is going on in the first part where there is isActive: getIsActive?

I was looking at http://es6-features.org/#ExpressionBodies and couldn't find a direct example.

I was trying to figure out how to use the isActive method of router and couldn't parse this code.

m1kael · Accepted Answer · 2017-03-29 23:55:41Z

2

isActive: getIsActive - this is aliasing of isActive as getIsActive. In the props of the component there's one called isActive, it's extracted by using object destructuring AND renamed locally as getIsActive.

Parenthesis are required here as the jsx markup spans multiple lines. Had it been a single line jsx, no parenthesis would've been needed.

And yes, this is a function (component) that returns jsx markup. This is known as stateless component as it's just a simple function. The opposite would be a full-blown React component that extends React.Component.

edited Mar 29, 2017 at 23:55

answered Mar 29, 2017 at 23:03

m1kael

2,8511 gold badge17 silver badges14 bronze badges

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

Comments

finalfreq · Accepted Answer · 2017-03-29 23:19:34Z

What you are seeing in the function arguments is object destructuring. In react whenever you make a stateless component it has props passed in as an argument to the stateless function. isActive: getIsActive is saying grab the property isActive from the props object and set it to a variable called getIsActive which is something you can do with object destructuring. THe rest of it is just pulling the specific properties we want from the props object and turning them into their own variables. This is great for declaring what props a component is going to consume. ...rest will create a variable called rest which will be an object with the remaining properties that weren't declared previously.

you can find more information on Destructuring here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

The destructuring assignment syntax is a JavaScript expression that makes it possible to extract data from arrays or objects into distinct variables.

the parenthesis are there since the jsx spans multiple lines vs being on one line and since we are immediately returning and not doing any assignment in the function we don't need to use blocks around the function body.

Collectives™ on Stack Overflow

Javascript - React - Arrow Function Usage Understanding

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related