NavigationLink Component to render a navigation item

navigationLink.js

import React from 'react';
import { Link } from 'gatsby';

const NavigationLink = props => {
  const externalUrl = props.elements.external_url.value;
  const menuTitle = props.elements.menu_title.value;

  if (!externalUrl) {
    const linkedItem = props.elements.linked_item[0].elements.url_slug.value;
    return <Link activeClassName="active" to={`/${linkedItem}/`}>{menuTitle}</Link>;
  } else {
    if (externalUrl === '/') {
      return <Link activeClassName="active" to={externalUrl}>{menuTitle}</Link>;
    } else {
      return <a href={externalUrl}>{menuTitle}</a>;
    }
  }
};

export default NavigationLink;