CODEWITHSUNDEEP
reactjscomponentsreact-router
Tyler Canton
Tyler Canton

Reputation: 641

...params not working in my Reach Component

Trying to create a Nav component however in my code base "...params" cause an "unexpected token" error:

render() {
  const {router} = this.context;
  const {
    index,
    onlyActiveOnIndex,
    to,
    children,
    ...params
  } = this.props;
  const isActive = router.isActive(to, onlyActiveOnIndex);
  const LinkComponent = index
    ? Link
    : IndexLink;
  return (
    <li className={isActive
      ? 'active'
      : ''}>
      <LinkComponent {...params}>{children}</LinkComponent>
    </li>
  );
}

The error displayed:

ERROR in ./src/components/common/NavItem.js Module build failed: SyntaxError: C:/Development/varAssignPages/src/components/common/NavItem.js: Unexpected token (16:6)

Upvotes: 0

Views: 94

Answers (1)

Fabian Schultz
Fabian Schultz

Reputation: 18556

You can use spread inside the JSX tag, but there's no need to use it when creating the const. Try this:

const {
    index,
    onlyActiveOnIndex,
    to,
    children,
    params
  } = this.props;

// ...

<LinkComponent {...params}>{children}</LinkComponent>

Upvotes: 1

Related Questions