From 20df8613baec56982d5c2a1fba157e20c1dd7fe0 Mon Sep 17 00:00:00 2001 From: Cayla Hamann Date: Mon, 15 Jun 2020 18:00:52 -0400 Subject: [PATCH 1/8] feat: populated navigation bar --- src/components/Sidebar.js | 1 - src/data/sidenav.json | 711 +++++++++++++++++++++----------------- 2 files changed, 398 insertions(+), 314 deletions(-) diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js index 91c52cb9c..d493644e4 100644 --- a/src/components/Sidebar.js +++ b/src/components/Sidebar.js @@ -24,7 +24,6 @@ const Sidebar = ({ className, pages, isOpen, toggle }) => ( ); Sidebar.propTypes = { className: PropTypes.string, - toggle: PropTypes.func.isRequired, pages: PropTypes.arrayOf(link).isRequired, isOpen: PropTypes.bool, }; diff --git a/src/components/Sidebar.module.scss b/src/components/Sidebar.module.scss index 5a67af271..2ad420809 100644 --- a/src/components/Sidebar.module.scss +++ b/src/components/Sidebar.module.scss @@ -14,10 +14,6 @@ &:hover { text-decoration: underline; } - - &.isActive { - font-weight: bold; - } } h3 { @@ -67,3 +63,46 @@ margin-right: 1rem; background-image: url('../images/developers-logo.svg'); } + +.nestedNav { + display: none; +} + +.isDisplay { + display: block; +} + +.listNav { + div { + margin-bottom: 1rem; + } + li { + color: var(--color-black); + font-weight: bold; + ul { + li { + font-weight: normal; + ul { + padding-left: 0.5rem; + li { + font-weight: bold; + text-transform: uppercase; + color: var(--color-neutrals-600); + font-size: 14px; + ul { + padding-left: 0rem; + li { + font-weight: normal; + text-transform: initial; + color: var(--color-black); + ul { + padding-left: 1rem; + } + } + } + } + } + } + } + } +} diff --git a/src/templates/ApiReferenceTemplate.js b/src/templates/ApiReferenceTemplate.js index f20e74fb4..e9796b36f 100644 --- a/src/templates/ApiReferenceTemplate.js +++ b/src/templates/ApiReferenceTemplate.js @@ -13,6 +13,10 @@ import SEO from '../components/Seo'; import templateStyles from './ReferenceTemplate.module.scss'; import useApiDoc from '../hooks/useApiDoc'; +import { BreadcrumbContext } from '../components/BreadcrumbContext'; +import createBreadcrumbs from '../utils/create-breadcrumbs'; +import pages from '../data/sidenav.json'; + const ApiReferenceTemplate = ({ data }) => { const { mdx } = data; const { frontmatter } = mdx; @@ -25,49 +29,53 @@ const ApiReferenceTemplate = ({ data }) => { constants = [], } = useApiDoc(api) ?? {}; - return ( - - -

{api}

- -
- -
+ const crumbs = createBreadcrumbs(frontmatter.path, pages); -
-

Usage

- {usage} -
+ return ( + + + +

{api}

- {methods.length > 0 && ( -
-

API methods

- {methods.map((method, i) => ( - - ))} +
+
- )} - {typeDefs.length > 0 && (
-

Type definitions

- {typeDefs.map((typeDef, i) => ( - - ))} +

Usage

+ {usage}
- )} - {constants.length > 0 && ( -
-

Constants

- {constants.map((constant, i) => ( - - ))} -
- )} - + {methods.length > 0 && ( +
+

API methods

+ {methods.map((method, i) => ( + + ))} +
+ )} + + {typeDefs.length > 0 && ( +
+

Type definitions

+ {typeDefs.map((typeDef, i) => ( + + ))} +
+ )} + + {constants.length > 0 && ( +
+

Constants

+ {constants.map((constant, i) => ( + + ))} +
+ )} + + ); }; diff --git a/src/templates/ComponentReferenceTemplate.js b/src/templates/ComponentReferenceTemplate.js index a5ef245f4..a11cb38f2 100644 --- a/src/templates/ComponentReferenceTemplate.js +++ b/src/templates/ComponentReferenceTemplate.js @@ -2,6 +2,7 @@ import React from 'react'; import cx from 'classnames'; import { graphql } from 'gatsby'; import PropTypes from 'prop-types'; + import InlineCodeSnippet from '../components/InlineCodeSnippet'; import ReactMarkdown from 'react-markdown'; import ReferenceExample from '../components/ReferenceExample'; @@ -15,6 +16,10 @@ import useComponentDoc from '../hooks/useComponentDoc'; import IconGallery from '../components/IconGallery'; import TypeDefReference from '../components/TypeDefReference'; +import { BreadcrumbContext } from '../components/BreadcrumbContext'; +import createBreadcrumbs from '../utils/create-breadcrumbs'; +import pages from '../data/sidenav.json'; + const previewStyles = { Spinner: { height: '16px', @@ -35,71 +40,75 @@ const ComponentReferenceTemplate = ({ data }) => { propTypes = [], } = useComponentDoc(component) ?? {}; - return ( - - -

{component}

-
- -
- -
-

Usage

- {usage} -
+ const crumbs = createBreadcrumbs(frontmatter.path, pages); - {examples.length > 0 && ( -
-

Examples

-
- {examples.map((example, i) => ( - - ))} -
+ return ( + + + +

{component}

+
+
- )} - {component === 'Icon' && (
- +

Usage

+ {usage}
- )} -
-

Props

- -
+ {examples.length > 0 && ( +
+

Examples

+
+ {examples.map((example, i) => ( + + ))} +
+
+ )} + + {component === 'Icon' && ( +
+ +
+ )} - {methods.length > 0 && (
-

Methods

- {methods.map((method, i) => ( - - ))} +

Props

+
- )} - {typeDefs.length > 0 && ( -
-

Type definitions

- {typeDefs.map((typeDef, i) => ( - - ))} -
- )} - + {methods.length > 0 && ( +
+

Methods

+ {methods.map((method, i) => ( + + ))} +
+ )} + + {typeDefs.length > 0 && ( +
+

Type definitions

+ {typeDefs.map((typeDef, i) => ( + + ))} +
+ )} + + ); }; diff --git a/src/templates/GuideTemplate.js b/src/templates/GuideTemplate.js index be15c186f..3786e7941 100644 --- a/src/templates/GuideTemplate.js +++ b/src/templates/GuideTemplate.js @@ -11,6 +11,7 @@ import Step from '../components/Step'; import Steps from '../components/Steps'; import Intro from '../components/Intro'; import SEO from '../components/Seo'; +import { BreadcrumbContext } from '../components/BreadcrumbContext'; import createBreadcrumbs from '../utils/create-breadcrumbs'; import pages from '../data/sidenav.json'; @@ -32,14 +33,16 @@ const GuideTemplate = ({ data }) => { const crumbs = createBreadcrumbs(frontmatter.path, pages); return ( - - - -

{title}

- - {body} - - + + + + +

{title}

+ + {body} + + + ); }; From a1292fdf7c81e781fb44e02530c54d67cf0768b5 Mon Sep 17 00:00:00 2001 From: Cayla Hamann Date: Tue, 16 Jun 2020 16:01:28 -0400 Subject: [PATCH 3/8] chore: restyling a little bit --- src/components/Sidebar.js | 62 ++++++++++++++++++------------ src/components/Sidebar.module.scss | 59 ++++++++++++++-------------- 2 files changed, 69 insertions(+), 52 deletions(-) diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js index 378e9f87a..6066b7dfb 100644 --- a/src/components/Sidebar.js +++ b/src/components/Sidebar.js @@ -8,38 +8,52 @@ import { link } from '../types'; import styles from './Sidebar.module.scss'; // recursively create navigation -const renderNav = (page, index) => { - const crumbs = useContext(BreadcrumbContext).flatMap((x) => x.displayName); - const [isDisplay, setIsDisplay] = useState(crumbs.includes(page.displayName)); - - return ( -
  • - {page.url ? ( - {page.displayName} - ) : ( -
    setIsDisplay(!isDisplay)} - onKeyPress={() => setIsDisplay(!isDisplay)} - tabIndex={0} - > - {page.displayName} -
    - )} - {page.children && ( +const renderNav = (pages, depthLevel = 0) => { + return pages.map((page, index) => { + const crumbs = useContext(BreadcrumbContext).flatMap((x) => x.displayName); + const [isDisplay, setIsDisplay] = useState( + crumbs.includes(page.displayName) + ); + const isCurrentPage = crumbs[crumbs.length - 1] === page.displayName; + + const display = page.url ? ( + {page.displayName} + ) : ( +
    setIsDisplay(!isDisplay)} + onKeyPress={() => setIsDisplay(!isDisplay)} + tabIndex={0} + > + {page.displayName} +
    + ); + let subNav; + + if (page.children) { + subNav = renderNav(page.children, depthLevel + 1); + } + return ( +
  • + {display}
      - {page.children.map(renderNav)} + {subNav}
    - )} -
    • - ); + + ); + }); }; const Sidebar = ({ className, pages, isOpen }) => ( ); diff --git a/src/components/Sidebar.module.scss b/src/components/Sidebar.module.scss index 2ad420809..e56873554 100644 --- a/src/components/Sidebar.module.scss +++ b/src/components/Sidebar.module.scss @@ -73,36 +73,39 @@ } .listNav { + ul { + padding-left: 1rem; + } +} + +.navDepth0 { + color: var(--color-black); + font-weight: bold; div { margin-bottom: 1rem; } - li { - color: var(--color-black); - font-weight: bold; - ul { - li { - font-weight: normal; - ul { - padding-left: 0.5rem; - li { - font-weight: bold; - text-transform: uppercase; - color: var(--color-neutrals-600); - font-size: 14px; - ul { - padding-left: 0rem; - li { - font-weight: normal; - text-transform: initial; - color: var(--color-black); - ul { - padding-left: 1rem; - } - } - } - } - } - } - } +} + +.navDepth1 { + font-weight: normal; + ul { + padding-left: 0.2rem; } } + +.navDepth2 { + font-weight: bold; + text-transform: uppercase; + color: var(--color-neutrals-600); + font-size: 14px; +} + +.navDepth3 { + font-weight: normal; + text-transform: initial; + color: var(--color-black); +} + +.isCurrentPage { + font-weight: bold; +} From 6d6f6d32529c0b4223c80b2c047325db1dc3a0fd Mon Sep 17 00:00:00 2001 From: Cayla Hamann Date: Tue, 16 Jun 2020 16:32:08 -0400 Subject: [PATCH 4/8] chore: context aware --- src/components/Sidebar.js | 2 +- src/components/Sidebar.module.scss | 3 +++ src/data/sidenav.json | 4 ++++ 3 files changed, 8 insertions(+), 1 deletion(-) diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js index 6066b7dfb..a8e8b7353 100644 --- a/src/components/Sidebar.js +++ b/src/components/Sidebar.js @@ -12,7 +12,7 @@ const renderNav = (pages, depthLevel = 0) => { return pages.map((page, index) => { const crumbs = useContext(BreadcrumbContext).flatMap((x) => x.displayName); const [isDisplay, setIsDisplay] = useState( - crumbs.includes(page.displayName) + crumbs.length === depthLevel || crumbs.includes(page.displayName) ); const isCurrentPage = crumbs[crumbs.length - 1] === page.displayName; diff --git a/src/components/Sidebar.module.scss b/src/components/Sidebar.module.scss index e56873554..4203330de 100644 --- a/src/components/Sidebar.module.scss +++ b/src/components/Sidebar.module.scss @@ -84,6 +84,9 @@ div { margin-bottom: 1rem; } + li { + margin-bottom: 1rem; + } } .navDepth1 { diff --git a/src/data/sidenav.json b/src/data/sidenav.json index d023d5bae..2583a267c 100644 --- a/src/data/sidenav.json +++ b/src/data/sidenav.json @@ -1,6 +1,7 @@ [ { "displayName": "Collect Data", + "url": "/collect-data", "children": [ { "displayName": "Log with the Log API", @@ -22,6 +23,7 @@ }, { "displayName": "Explore Data", + "url": "/explore-data", "children": [ { "displayName": "Write NRQL Queries", @@ -35,6 +37,7 @@ }, { "displayName": "Build Apps", + "url": "/build-apps", "children": [ { "displayName": "Map Pageviews by Region", @@ -64,6 +67,7 @@ }, { "displayName": "Automate Workflows", + "url": "/automate-workflows", "children": [ { "displayName": "Monitor, Alert, and Analyze", From ce310a1ca7451156676bf2102e06939eba10bee4 Mon Sep 17 00:00:00 2001 From: Cayla Hamann Date: Tue, 16 Jun 2020 16:57:54 -0400 Subject: [PATCH 5/8] chore: restructure sidenav json --- src/data/sidenav.json | 346 +++++++++++++++++++++--------------------- 1 file changed, 173 insertions(+), 173 deletions(-) diff --git a/src/data/sidenav.json b/src/data/sidenav.json index 2583a267c..3b53b290b 100644 --- a/src/data/sidenav.json +++ b/src/data/sidenav.json @@ -95,202 +95,202 @@ "displayName": "Component library", "children": [ { - "displayName": "UI Components", + "displayName": "Controls", "children": [ { - "displayName": "Text Components", - "children": [ - { - "displayName": "BlockText", - "url": "/components/block-text" - }, - { - "displayName": "HeadingText", - "url": "/components/heading-text" - }, - { - "displayName": "Link", - "url": "/components/link" - } - ] + "displayName": "AccountPicker", + "url": "/components/account-picker" }, { - "displayName": "Layout Components", - "children": [ - { - "displayName": "AutoSizer", - "url": "/components/auto-sizer" - }, - { - "displayName": "Card", - "url": "/components/card" - }, - { - "displayName": "CardBody", - "url": "/components/card-body" - }, - { - "displayName": "CardHeader", - "url": "/components/card-header" - }, - { - "displayName": "Grid", - "url": "/components/grid" - }, - { - "displayName": "GridItem", - "url": "/components/grid-item" - }, - { - "displayName": "List", - "url": "/components/list" - }, - { - "displayName": "ListItem", - "url": "/components/list-item" - }, - { - "displayName": "Spacing", - "url": "/components/spacing" - }, - { - "displayName": "Stack", - "url": "/components/stack" - }, - { - "displayName": "StackItem", - "url": "/components/stack-item" - }, - { - "displayName": "Tabs", - "url": "/components/tabs" - }, - { - "displayName": "TabsItem", - "url": "/components/tabs-item" - } - ] + "displayName": "Button", + "url": "/components/button" }, { - "displayName": "Form Components", - "children": [ - { - "displayName": "AccountPicker", - "url": "/components/account-picker" - }, - { - "displayName": "Button", - "url": "/components/button" - }, - { - "displayName": "Checkbox", - "url": "/components/checkbox" - }, - { - "displayName": "Dropdown", - "url": "/components/dropdown" - }, - { - "displayName": "DropdownItem", - "url": "/components/dropdown-item" - }, - { - "displayName": "Radio", - "url": "/components/radio" - }, - { - "displayName": "RadioGroup", - "url": "/components/radio-group" - }, - { - "displayName": "Select", - "url": "/components/select" - }, - { - "displayName": "SelectItem", - "url": "/components/select-item" - }, - { - "displayName": "TextField", - "url": "/components/text-field" - } - ] + "displayName": "Checkbox", + "url": "/components/checkbox" + }, + { + "displayName": "Dropdown", + "url": "/components/dropdown" + }, + { + "displayName": "DropdownItem", + "url": "/components/dropdown-item" + }, + { + "displayName": "Radio", + "url": "/components/radio" + }, + { + "displayName": "RadioGroup", + "url": "/components/radio-group" + }, + { + "displayName": "Select", + "url": "/components/select" + }, + { + "displayName": "SelectItem", + "url": "/components/select-item" }, + { + "displayName": "TextField", + "url": "/components/text-field" + } + ] + }, + { + "displayName": "Tables", + "children": [ { "displayName": "Table", - "children": [ - { - "displayName": "Table", - "url": "/components/table" - }, - { - "displayName": "TableHeader", - "url": "/components/table-header" - }, - { - "displayName": "TableHeaderCell", - "url": "/components/table-header-cell" - }, - { - "displayName": "TableRow", - "url": "/components/table-row" - }, - { - "displayName": "TableRowCell", - "url": "/components/table-row-cell" - }, - { - "displayName": "EntityTitleTableRowCell", - "url": "/components/entity-title-table-row-cell" - }, - { - "displayName": "MetricTableRowCell", - "url": "/components/metric-table-row-cell" - }, - { - "displayName": "SparklineTableRowCell", - "url": "/components/sparkline-table-row-cell" - }, - { - "displayName": "UserTableRowCell", - "url": "/components/user-table-row-cell" - } - ] + "url": "/components/table" }, { - "displayName": "Feedback Components", - "children": [ - { - "displayName": "Icon", - "url": "/components/icon" - }, - { - "displayName": "Spinner", - "url": "/components/spinner" - }, - { - "displayName": "Toast", - "url": "/components/toast" - } - ] + "displayName": "TableHeader", + "url": "/components/table-header" + }, + { + "displayName": "TableHeaderCell", + "url": "/components/table-header-cell" + }, + { + "displayName": "TableRow", + "url": "/components/table-row" + }, + { + "displayName": "TableRowCell", + "url": "/components/table-row-cell" }, { - "displayName": "Overlaid Components", + "displayName": "EntityTitleTableRowCell", + "url": "/components/entity-title-table-row-cell" + }, + { + "displayName": "MetricTableRowCell", + "url": "/components/metric-table-row-cell" + }, + { + "displayName": "SparklineTableRowCell", + "url": "/components/sparkline-table-row-cell" + }, + { + "displayName": "UserTableRowCell", + "url": "/components/user-table-row-cell" + } + ] + }, + { + "displayName": "Feedback", + "children": [ + { + "displayName": "Icon", + "url": "/components/icon" + }, + { + "displayName": "Spinner", + "url": "/components/spinner" + }, + { + "displayName": "Toast", + "url": "/components/toast" + } + ] + }, + { + "displayName": "Overlays", + "children": [ + { + "displayName": "Modal", + "url": "/components/modal" + }, + { + "displayName": "Tooltip", + "url": "/components/tooltip" + } + ] + }, + { + "displayName": "Structure", + "children": [ + { + "displayName": "AutoSizer", + "url": "/components/auto-sizer" + }, + { + "displayName": "Card", + "url": "/components/card" + }, + { + "displayName": "CardBody", + "url": "/components/card-body" + }, + { + "displayName": "CardHeader", + "url": "/components/card-header" + }, + { + "displayName": "Grid", + "url": "/components/grid" + }, + { + "displayName": "GridItem", + "url": "/components/grid-item" + }, + { + "displayName": "List", + "url": "/components/list" + }, + { + "displayName": "ListItem", + "url": "/components/list-item" + }, + { + "displayName": "Spacing", + "url": "/components/spacing" + }, + { + "displayName": "Stack", + "url": "/components/stack" + }, + { + "displayName": "StackItem", + "url": "/components/stack-item" + }, + { + "displayName": "Tabs", + "url": "/components/tabs" + }, + { + "displayName": "TabsItem", + "url": "/components/tabs-item" + } + ] + }, + { + "displayName": "Text", + "children": [ + { + "displayName": "Text Components", "children": [ { - "displayName": "Modal", - "url": "/components/modal" + "displayName": "BlockText", + "url": "/components/block-text" }, { - "displayName": "Tooltip", - "url": "/components/tooltip" + "displayName": "HeadingText", + "url": "/components/heading-text" + }, + { + "displayName": "Link", + "url": "/components/link" } ] } ] }, { - "displayName": "Charts", + "displayName": "Data Visualization", "children": [ { "displayName": "AreaChart", From 0f0e556a85381ebc467d1de3870f4f36a9b6ddbf Mon Sep 17 00:00:00 2001 From: Cayla Hamann Date: Tue, 16 Jun 2020 17:27:57 -0400 Subject: [PATCH 6/8] chore: change hover --- src/components/Sidebar.module.scss | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/src/components/Sidebar.module.scss b/src/components/Sidebar.module.scss index 4203330de..7a897b912 100644 --- a/src/components/Sidebar.module.scss +++ b/src/components/Sidebar.module.scss @@ -1,4 +1,6 @@ .sidebar { + font-size: 0.875rem; + ul { margin: 0; padding-left: 1rem; @@ -9,11 +11,6 @@ text-decoration: none; color: var(--color-black); display: inline-block; - padding: 0.2rem 0; - - &:hover { - text-decoration: underline; - } } h3 { @@ -82,10 +79,10 @@ color: var(--color-black); font-weight: bold; div { - margin-bottom: 1rem; + margin: 1rem 0; } li { - margin-bottom: 1rem; + margin: 1rem 0; } } From 4c6f61ab0874c4c43d1cf127387257d17a16d344 Mon Sep 17 00:00:00 2001 From: lbaker Date: Tue, 16 Jun 2020 15:01:49 -0700 Subject: [PATCH 7/8] chore: Edit code formatting and NRQL --- src/markdown-pages/build-an-app.mdx | 54 ++++++++++++++--------------- 1 file changed, 27 insertions(+), 27 deletions(-) diff --git a/src/markdown-pages/build-an-app.mdx b/src/markdown-pages/build-an-app.mdx index e55f06647..6ad5ee120 100644 --- a/src/markdown-pages/build-an-app.mdx +++ b/src/markdown-pages/build-an-app.mdx @@ -160,7 +160,7 @@ Now that you've got a table, you can drop a TableChart populated with data from Put this code into the `row` div. ```jsx - + ``` Go to New Relic One and click your app to see your data in the table. (You may need to serve your app to New Relic again.) @@ -209,10 +209,10 @@ Above the render() function, add a constructor to build the text field object. ```jsx constructor(props) { - super(props); - this.state = { - countryCode: null - } + super(props); + this.state = { + countryCode: null + } } ``` @@ -225,7 +225,7 @@ const { countryCode } = this.state; Now add country code to your table chart query. ```jsx - + ``` Reload your app to try out the text field. @@ -318,19 +318,19 @@ Using latitude and longitude with country codes, you can put New Relic data on a ```jsx mapData() { - const { countryCode } = this.state; - const query = `{ - actor { - account(id: 1606862) { - mapData: nrql(query: "SELECT count(*) as x, average(duration) as y, sum(asnLatitude)/count(*) as lat, sum(asnLongitude)/count(*) as lng FROM PageView FACET regionCode, countryCode WHERE appName = 'WebPortal' ${countryCode ? ` WHERE countryCode like '%${countryCode}%' ` : ''} LIMIT 1000 ") { - results - nrql - } + const { countryCode } = this.state; + const query = `{ + actor { + account(id: 1606862) { + mapData: nrql(query: "SELECT count(*) as x, average(duration) as y, sum(asnLatitude)/count(*) as lat, sum(asnLongitude)/count(*) as lng FROM PageView FACET regionCode, countryCode WHERE appName = 'WebPortal' ${countryCode ? ` WHERE countryCode like '%${countryCode}%' ` : ''} LIMIT 1000 ") { + results + nrql } } - }`; - // console.debug(query); - return query; + } + }`; + // console.debug(query); + return query; }; ``` @@ -342,15 +342,15 @@ mapData() { Above the mapData function, add this code to customize the map marker colors. ```jsx - getMarkerColor(measure, apdexTarget = 1.7) { - if (measure <= apdexTarget) { - return '#11A600'; - } else if (measure >= apdexTarget && measure <= apdexTarget * 4) { - return '#FFD966'; - } else { - return '#BF0016'; - } - }; +getMarkerColor(measure, apdexTarget = 1.7) { + if (measure <= apdexTarget) { + return '#11A600'; + } else if (measure >= apdexTarget && measure <= apdexTarget * 4) { + return '#FFD966'; + } else { + return '#BF0016'; + } +}; ``` Change the HTML color code values to your taste. @@ -376,7 +376,7 @@ Between the text field row and the table chart row, insert a new row for the map ```jsx
    - {({ loading, error, data}) ==> { + {({ loading, error, data}) => { if (loading) { return } From 30cc9253ac60d7ef56d1e2a4fac1a35036229ce9 Mon Sep 17 00:00:00 2001 From: lbaker Date: Tue, 16 Jun 2020 15:08:51 -0700 Subject: [PATCH 8/8] chore: More code tweaks --- src/markdown-pages/build-an-app.mdx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/markdown-pages/build-an-app.mdx b/src/markdown-pages/build-an-app.mdx index 6ad5ee120..e2a583ba8 100644 --- a/src/markdown-pages/build-an-app.mdx +++ b/src/markdown-pages/build-an-app.mdx @@ -211,7 +211,7 @@ Above the render() function, add a constructor to build the text field object. constructor(props) { super(props); this.state = { - countryCode: null + countryCode: null } } ``` @@ -329,7 +329,6 @@ mapData() { } } }`; - // console.debug(query); return query; }; ```