1<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><style data-href="/styles.bf63ffca541d1ab536ba.css" id="gatsby-global-css">@import url(https://fonts.googleapis.com/css?family=PT+Sans:400,700|PT+Serif);@import url(https://use.fontawesome.com/releases/v5.3.1/css/all.css);:root[data-user-reduced-motion] .menu a{padding:.875rem;text-decoration:none}.menu-main{grid-row:1/span 2;grid-column:3}.menu{margin:0;padding:0;list-style:none}.menu a{position:relative;display:inline-block;text-transform:uppercase;letter-spacing:2px;font-weight:700;font-size:1rem;padding:.375rem;border:none;transition:all .3s;text-decoration:none}.menu-main a{color:var(--marron)}.menu a:hover{padding:.375rem}.privacy-policy a{text-transform:none;font-size:.75rem}@media only screen and (min-width:767px){.menu-main{grid-row:2;grid-column:2/span 2;justify-self:end;align-self:end}.menu-main li{display:inline-block}.menu a{font-size:1.125rem;padding:.875rem}.menu a:hover{padding:.875rem}.privacy-policy a{text-transform:none;font-size:.75rem}}@media screen and (prefers-reduced-motion:reduce){:root:not([data-user-reduced-motion]) .menu a{padding:.375rem;text-decoration:none}:root[data-user-reduced-motion] .menu a{padding:.375rem;text-decoration:none}}@media screen and (prefers-reduced-motion:reduce) and (min-width:767px){:root:not([data-user-reduced-motion]) .menu a{padding:.875rem;text-decoration:none}:root[data-user-reduced-motion] .menu a{padding:.875rem;text-decoration:none}}.toggle{grid-column:1/span 2;align-self:center}@media only screen and (min-width:767px){.toggle{grid-column:3/span 1;grid-row:1/span 1}}.header-wrapper{margin:0 auto;padding:0 1.5rem;max-width:52rem;display:grid}.header__right{display:flex}.logo{grid-column:1/span 1;grid-row:2/span 1;align-self:center;margin:0}.logo img{width:175px}@media only screen and (min-width:767px){.logo img{width:200px}.header-wrapper{grid-template-rows:3rem 5.875rem;grid-template-columns:25% auto 13rem}}.formkit-form[data-uid="4218bd5fb5"] *{font-family:PT Sans,sans-serif;box-sizing:border-box}.formkit-form[data-uid="4218bd5fb5"]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.formkit-form[data-uid="4218bd5fb5"] legend{border:none;font-size:inherit;margin-bottom:10px;padding:0;position:relative;display:table}.formkit-form[data-uid="4218bd5fb5"] fieldset{border:0;padding:.01em 0 0;margin:0;min-width:0}.formkit-form[data-uid="4218bd5fb5"] body:not(:-moz-handler-blocked) fieldset{display:table-cell}.formkit-form[data-uid="4218bd5fb5"] h1,.formkit-form[data-uid="4218bd5fb5"] h2,.formkit-form[data-uid="4218bd5fb5"] h3,.formkit-form[data-uid="4218bd5fb5"] h4,.formkit-form[data-uid="4218bd5fb5"] h5,.formkit-form[data-uid="4218bd5fb5"] h6{color:inherit;font-family:"PT Serif",serif}.formkit-form[data-uid="4218bd5fb5"] p{color:inherit;font-size:inherit;font-weight:inherit}.formkit-form[data-uid="4218bd5fb5"][data-format=modal]{display:none}.formkit-form[data-uid="4218bd5fb5"][data-format="slide in"]{display:none}.formkit-form[data-uid="4218bd5fb5"] .formkit-checkboxes,.formkit-form[data-uid="4218bd5fb5"] .formkit-input,.formkit-form[data-uid="4218bd5fb5"] .formkit-select{width:100%}.formkit-form[data-uid="4218bd5fb5"] .formkit-button,.formkit-form[data-uid="4218bd5fb5"] .formkit-submit{border:2px solid;border-radius:16px;color:#640d23;display:inline-block;cursor:pointer;overflow:hidden;padding:0;position:relative;vertical-align:middle}.formkit-form[data-uid="4218bd5fb5"] .formkit-button>span,.formkit-form[data-uid="4218bd5fb5"] .formkit-submit>span{display:block;transition:all .3s ease-in-out;padding:12px 24px}.formkit-form[data-uid="4218bd5fb5"] .formkit-input{background:transparent;font-size:15px;padding:12px;flex:1 0 auto;line-height:1.4;margin:0;transition:border-color .3s ease-out}.formkit-form[data-uid="4218bd5fb5"] .formkit-input:focus{border-color:#1677be;transition:border-color .3s ease}.convertkit-signup--footer .formkit-form[data-uid="4218bd5fb5"] .formkit-input::-webkit-input-placeholder{color:#640d23}.convertkit-signup--footer .formkit-form[data-uid="4218bd5fb5"] .formkit-input:-ms-input-placeholder{color:#640d23}.convertkit-signup--footer .formkit-form[data-uid="4218bd5fb5"] .formkit-input::placeholder{color:#640d23}.convertkit-signup--sidebar .formkit-form[data-uid="4218bd5fb5"] .formkit-input::-webkit-input-placeholder{color:#640d23}.convertkit-signup--sidebar .formkit-form[data-uid="4218bd5fb5"] .formkit-input:-ms-input-placeholder{color:#640d23}.convertkit-signup--sidebar .formkit-form[data-uid="4218bd5fb5"] .formkit-input::placeholder{color:#640d23}.formkit-form[data-uid="4218bd5fb5"] [data-group=dropdown]{position:relative;display:inline-block;width:100%}.formkit-form[data-uid="4218bd5fb5"] [data-group=dropdown]:before{content:"";top:calc(50% - 2.5px);right:10px;position:absolute;pointer-events:none;border-color:#4f4f4f transparent transparent;border-style:solid;border-width:6px 6px 0;
1height:0;width:0;z-index:999}.formkit-form[data-uid="4218bd5fb5"] [data-group=dropdown] select{height:auto;width:100%;cursor:pointer;color:#333;line-height:1.4;margin-bottom:0;-webkit-appearance:none;appearance:none;font-size:15px;padding:12px 25px 12px 12px;border:1px solid #e3e3e3;background:#fff}.formkit-form[data-uid="4218bd5fb5"] [data-group=checkboxes]{text-align:left;margin:0}.formkit-form[data-uid="4218bd5fb5"] [data-group=checkboxes] [data-group=checkbox]{margin-bottom:10px}.formkit-form[data-uid="4218bd5fb5"] [data-group=checkboxes] [data-group=checkbox] *{cursor:pointer}.formkit-form[data-uid="4218bd5fb5"] [data-group=checkboxes] [data-group=checkbox]:last-of-type{margin-bottom:0}.formkit-form[data-uid="4218bd5fb5"] [data-group=checkboxes] [data-group=checkbox] input[type=checkbox]{display:none}.formkit-form[data-uid="4218bd5fb5"] [data-group=checkboxes] [data-group=checkbox] input[type=checkbox]+label:after{content:none}.formkit-form[data-uid="4218bd5fb5"] [data-group=checkboxes] [data-group=checkbox] input[type=checkbox]:checked+label:after{border-color:#fff;content:""}.formkit-form[data-uid="4218bd5fb5"] [data-group=checkboxes] [data-group=checkbox] input[type=checkbox]:checked+label:before{background:#10bf7a;border-color:#10bf7a}.formkit-form[data-uid="4218bd5fb5"] [data-group=checkboxes] [data-group=checkbox] label{position:relative;display:inline-block;padding-left:28px}.formkit-form[data-uid="4218bd5fb5"] [data-group=checkboxes] [data-group=checkbox] label:after,.formkit-form[data-uid="4218bd5fb5"] [data-group=checkboxes] [data-group=checkbox] label:before{position:absolute;content:"";display:inline-block}.formkit-form[data-uid="4218bd5fb5"] [data-group=checkboxes] [data-group=checkbox] label:before{height:16px;width:16px;border:1px solid #e3e3e3;background:#fff;left:0;top:3px}.formkit-form[data-uid="4218bd5fb5"] [data-group=checkboxes] [data-group=checkbox] label:after{height:4px;width:8px;border-left:2px solid #4d4d4d;border-bottom:2px solid #4d4d4d;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);left:4px;top:8px}.formkit-form[data-uid="4218bd5fb5"] .formkit-alert{background:#f9fafb;border:1px solid #e3e3e3;border-radius:5px;flex:1 0 auto;list-style:none;margin:25px auto;padding:12px;width:100%}.formkit-form[data-uid="4218bd5fb5"] .formkit-alert:empty{display:none}.formkit-form[data-uid="4218bd5fb5"] .formkit-alert-success{background:#d3fbeb;border-color:#10bf7a;color:#0c905c}.formkit-form[data-uid="4218bd5fb5"] .formkit-alert-error{background:#fde8e2;border-color:#f2643b;color:#ea4110}.formkit-form[data-uid="4218bd5fb5"] .formkit-spinner{display:flex;height:0;margin:0 auto;position:absolute;top:0;left:0;right:0;width:0;overflow:hidden;transition:all .3s ease-in-out}.formkit-form[data-uid="4218bd5fb5"] .formkit-spinner>div{margin:auto;width:12px;height:12px;background-color:#fff;opacity:.3;border-radius:100%;display:inline-block;-webkit-animation:formkit-bouncedelay-formkit-form-data-uid-4218bd5fb5- 1.4s ease-in-out infinite both;animation:formkit-bouncedelay-formkit-form-data-uid-4218bd5fb5- 1.4s ease-in-out infinite both}.formkit-form[data-uid="4218bd5fb5"] .formkit-spinner>div:first-child{-webkit-animation-delay:-.32s;animation-delay:-.32s}.formkit-form[data-uid="4218bd5fb5"] .formkit-spinner>div:nth-child(2){-webkit-animation-delay:-.16s;animation-delay:-.16s}.formkit-form[data-uid="4218bd5fb5"] .formkit-submit[data-active] .formkit-spinner{opacity:1;height:100%;width:50px}.formkit-form[data-uid="4218bd5fb5"] .formkit-submit[data-active] .formkit-spinner~span{opacity:0}@-webkit-keyframes formkit-bouncedelay-formkit-form-data-uid-4218bd5fb5-{0%,80%,to{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes formkit-bouncedelay-formkit-form-data-uid-4218bd5fb5-{0%,80%,to{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}.formkit-form[data-uid="4218bd5fb5"]{max-width:700px}.formkit-form[data-uid="4218bd5fb5"] [data-style=clean]{width:100%}.formkit-form[data-uid="4218bd5fb5"] .formkit-fields{display:flex;flex-wrap:wrap;margin:0 auto}.formkit-form[data-uid="4218bd5fb5"] .formkit-field,.formkit-form[data-uid="4218bd5fb5"] .formkit-submit{margin:0 0 15px;flex:1 0 100%}.formkit-form[data-uid="4218bd5fb5"] .formkit-powered-by{font-size:12px;margin:0}.formkit-form[data-uid="4218bd5fb5"] .formkit-powered-by[data-active=false]{opacity:.5}.formkit-form[data-uid="4218bd5fb5"][min-width~="700"] [data-style=clean],.formkit-form[data-uid="4218bd5fb5"][min-width~="800"] [data-style=clean]{padding:10px}.formkit-form[data-uid="4218bd5fb5"][min-width~="700"] .formkit-fields[data-stacked=false],.formkit-form[data-uid="4218bd5fb5"][min-width~="800"] .formkit-fields[data-stacked=false]{margin-left:-5px;margin-right:-5px}.formkit-form[data-uid="4218bd5fb5"][min-width~="700"] .formkit-fields[data-stacked=false] .formkit-field,.formkit-form[data-uid="4218bd5fb5"][min-width~="700"] .formkit-fields[data-stacked=false] .formkit-submit,.formkit-form[data-uid="4218bd5fb5"][min-width~="800"] .formkit-fields[data-stacked=false] .formkit-field,.formkit-form[data-uid="4218bd5fb5"][min-width~="800"] .formkit-fields[data-stacked=false] .formkit-submit{margin:0 5px 15px}.formkit-form[data-uid="4218bd5fb5"][min-width~="700"] .formkit-fields[data-stacked=false] .formkit-field,.formkit-form[data-uid="4218bd5fb5"][min-width~="800"] .formkit-fields[data-stacked=false] .formkit-field{flex:100 1 auto}.formkit-form[data-uid="4218bd5fb5"][min-width~="700"] .formkit-fields[data-stacked=false] .formkit-submit,.formkit-form[data-uid="4218bd5fb5"][min-width~="800"] .formkit-fields[data-stacked=false] .formkit-submit{flex:1 1 auto}.convertkit-signup--white-bg{padding:2rem;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.11);font-weight:700}.formkit-form h2{margin-top:0}.formkit-input--email,.formkit-input--name{margin-bottom:.75rem}.formkit-submit{border-radius:5px;padding:5px;font-weight:500;font-family:PT Sans,sans-serif;color:#fff;border:1px solid #640d23;background:transparent;font-size:1rem;-webkit-appearance:none;appearance:none}.convertkit-signup--footer input{background:transparent;border:#640d23;border-bottom:2px solid #640d23;color:#640d23;font-size:1rem}
1.convertkit-signup.convertkit-signup--footer{width:65%;float:right}.convertkit-signup.convertkit-signup--footer .formkit-form[data-uid="4218bd5fb5"] .formkit-input{background:transparent!important}footer{background:var(--off-white);padding:15px 0;color:var(--marron)}.footer-wrapper{margin:0 auto;max-width:52rem;padding:0 20px}.footer-menu li{list-style:none;text-align:left}.footer-details{display:flex;flex-direction:column}footer a{color:var(--marron)}footer a:focus{outline:solid 2px var(--marron)}footer input:focus{outline:solid 2px var(--marron)}.social{display:flex;padding:0}.social li{list-style:none;padding:1rem}.social a{font-size:1.5rem;border-bottom:none}.credit{font-size:.75rem;margin:2.5rem 20px 1rem}@media only screen and (min-width:767px){.footer-wrapper{display:flex;justify-content:space-between}.social{justify-content:flex-end}.credit{text-align:center}.convertkit-signup--footer{align-self:flex-end}}:root{--teal:#24728a;--vermillion:#c03711;--white:#fff;--peach:#fed8ce}:root[data-user-reduced-motion=true] *{-webkit-animation-play-state:paused!important;animation-play-state:paused!important;transition:none!important;scroll-behavior:auto!important}:root[data-user-reduced-motion=true] a{padding-bottom:0;border-bottom:none;text-decoration:underline}body{margin:0;font-family:PT Sans,sans-serif;background:var(--off-white);color:var(--marron);font-size:1.125rem}h1,h2,h3,h4,h5,h6{font-family:"PT Serif",serif}.visually-hidden{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}.focusable.visually-hidden:focus{position:relative;left:0;width:auto;height:auto;overflow:auto;border-bottom:none}.wrapper{margin:0 auto;max-width:52rem;padding:20px}.content__heading{background:var(--pale-blue);color:var(--navy)}.content__heading a{color:var(--navy)}.promo{position:fixed;-webkit-transform:translateY(-80px);transform:translateY(-80px);width:100%;z-index:10;background:var(--white);box-shadow:1px 1px 5px 0 rgba(0,0,0,.2);padding:.5rem 0;text-align:center;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s}.promo-showing .promo{-webkit-transform:translateY(0);transform:translateY(0)}time{position:relative;display:inline-block;font-family:"PT Serif",serif;color:var(--vermillion);font-style:italic;font-weight:700}p{line-height:1.5}a{padding-bottom:2px;border-bottom:2px solid;text-decoration:none;color:var(--marron);font-weight:700;transition:padding-bottom .3s ease}a:hover,p a:focus{padding-bottom:4px}p a:focus{outline:1px solid #1e3650}li{line-height:1.5}img{max-width:100%}.gatsby-resp-image-link{border-bottom:none;padding:0}.gatsby-resp-image-link:hover{padding:0}.gatsby-resp-image-wrapper{margin-bottom:1rem}h2 a,h3 a{color:var(--marron);font-size:inherit}code{font-weight:700;font-size:1.25rem;padding:2px 5px;line-height:1.5}h2 code{font-size:1.75rem}pre{background:var(--navy);color:var(--off-white);display:block;margin:0 auto;padding:1rem;overflow:auto;max-width:590px}pre code{font-size:.9325rem;font-weight:400}.gatsby-highlight{margin:1rem 0}.language-html .tag,.language-jsx .tag{color:#fdb4cf}.language-html .attr-value,.language-jsx .attr-name{color:#b2dfeb}.language-html .attr-value .punctuation:first-child{color:#fdb4cf}.language-css,.language-scss{color:#b2dfeb}.language-css .selector,.language-scss .selector{color:#fdb4cf}.language-css .property,.language-css .punctuation,.language-scss .property,.language-scss .punctuation{color:#fff}.language-js .keyword,.language-jsx .keyword{color:#fdb4cf}.language-js .function,.language-jsx .function{color:#b2dfeb}.language-js .string,.language-jsx .string{color:#f8b4a0}.language-js .number,.language-jsx .operator{color:#b2dfeb}.language-js .comment,.language-jsx .operator{color:#c4c4c4}.language-js .operator,.language-jsx .operator{color:#fdb4cf}.language-json .property{color:#f8b4a0}.language-json .string{color:#b2dfeb}.language-diff .inserted{color:#a9f9b2}.language-diff .deleted{color:#f8b4a0}.gatsby-highlight-code-line{display:block;margin-right:-1rem;margin-left:-1rem;padding-right:1rem;padding-left:.25rem;
1border-left:8px solid #c03711;background:#305282}video{max-width:100%}audio,video{display:block;margin:1rem 0}blockquote:not(.twitter-tweet){position:relative;margin:3rem auto;border-left:8px solid var(--vermillion);padding:3rem;width:60%;font-size:1.4rem;font-weight:500;line-height:1.6;color:var(--marron)}twitterwidget{margin-left:auto;margin-right:auto}input{background:transparent;border:none;border-bottom:2px solid}input[type=submit]{cursor:pointer}.breadcrumb ol{padding:0}.breadcrumb li{display:inline;list-style:none;padding-right:7px}.breadcrumb li:not(:last-child):after{content:" \BB ";padding-left:3px}.breadcrumb a:focus{padding-bottom:4px;outline:1px solid #1e3650}blockquote.twitter-tweet{display:inline-block;font-family:Helvetica Neue,Roboto,Segoe UI,Calibri,sans-serif;font-size:12px;font-weight:700;line-height:16px;border-radius:5px;border-color:#eee #ddd #bbb;border-style:solid;border-width:1px;box-shadow:0 1px 3px rgba(0,0,0,.15);margin:10px 5px;padding:0 16px 16px;max-width:468px}blockquote.twitter-tweet p{font-size:16px;font-weight:400;line-height:20px}blockquote.twitter-tweet a{color:inherit;font-weight:400;text-decoration:none;outline:0 none}blockquote.twitter-tweet a:focus,blockquote.twitter-tweet a:hover{text-decoration:underline}.source{max-width:590px;margin:0 auto}.sidebar--white-bg{padding:2rem;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.11);font-weight:700}.right-arrow{border:solid;border-width:0 3px 3px 0;display:inline-block;transform:rotate(-45deg);-webkit-transform:rotate(-45deg);padding:3px}.toggle__button{opacity:0}.toggle__button+label{margin-left:20px;margin-top:1px;position:relative}.toggle__button+label:before{content:"";position:absolute;left:-39px;top:-2px;border:2px solid;border-radius:10px;width:15px;height:15px;transition:all .3s}.toggle__button:focus+label:before{box-shadow:1px 1px 10px #1e3650}.toggle__button:hover+label:before{cursor:pointer}.toggle__button+label:after{content:"";position:absolute;border-radius:14px;border:2px solid;left:-45px;top:-6px;z-index:-10;width:35px;height:24px}.toggle__button:checked+label:before{left:-30px;background:#f3e9ea}.center{width:50%;display:block;margin:1rem auto}@media screen and (prefers-reduced-motion:reduce){:root:not([data-user-reduced-motion]) *{-webkit-animation-play-state:paused!important;animation-play-state:paused!important;transition:none!important;scroll-behavior:auto!important}:root:not([data-user-reduced-motion]) a{padding-bottom:0;border-bottom:none;text-decoration:underline}}.call-to-action{background:#fff;color:#24728a;padding:1rem 2rem}.call-to-action p:first-of-type{display:none}.call-to-action a{background:#c03711;color:#fff;border-radius:16px;padding:12px 14px;font-weight:500;font-size:1.25rem;display:inline-block;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s}.call-to-action a:focus,.call-to-action a:hover{-webkit-transform:scale(1.1);transform:scale(1.1);padding:12px 14px}@media only screen and (min-width:767px){.call-to-action{display:grid;grid-template-columns:25% 75%;grid-template-rows:repeat(3,1fr);max-height:240px;margin:2rem auto 3rem;max-width:650px;padding:0}.call-to-action h2,.call-to-action p{grid-column-start:2;place-self:center;text-align:center}.call-to-action p:first-of-type{display:block;margin:-.375rem 0 0;grid-column-start:1;grid-row-start:1;grid-row-end:3;place-self:auto}}:root{--pale-blue:#b5d8ff}:root[data-user-reduced-motion=true] .hero__cta__link{text-decoration:none;padding:12px 14px;border:2px solid}:root[data-user-reduced-motion=true] .hero__cta__link:hover{-webkit-transform:scale(1.05);transform:scale(1.05)}.hero{padding:3rem 0;background:var(--pale-blue);color:var(--navy)}.hero__text-wrapper{max-width:52rem;margin:0 auto;padding:1.5rem}.hero__cta__link{border-radius:16px;border:2px solid;padding:12px 14px;font-weight:500;color:var(--navy);font-size:1.25rem;display:inline-block;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s}.hero__cta__link:focus,.hero__cta__link:hover{-webkit-transform:scale(1.1);transform:scale(1.1);padding:12px 14px}.hero__cta__link:focus{outline:solid 3px var(--navy)}@media only screen and (min-width:767px){.hero__body--break{display:block}.hero__body p{line-height:1.5}}@media screen and (prefers-reduced-motion:reduce){:root:not([data-user-reduced-motion]) .hero__cta__link{text-decoration:none;padding:12px 14px;border:2px solid}:root:not([data-user-reduced-motion]) .hero__cta__link:hover{-webkit-transform:scale(1.05);transform:scale(1.05)}}:root{--marron:#640d23;--off-white:#f3e9ea;--navy:#1e3650}:root[data-user-reduced-motion=true] .blog__more-link{text-decoration:none;padding:12px 14px;border:2px solid}:root[data-user-reduced-motion=true] .blog__more-link:hover{-webkit-transform:scale(1.05);transform:scale(1.05)}.book{background-color:var(--navy);padding:1rem 0;text-align:center}.book,.book a{color:var(--off-white)}.blog{max-width:52rem;padding:2rem 1.5rem;margin:0 auto}.blog__items{margin:2rem 0}.blog__title{margin:.625rem 0;font-size:1.3125rem}.blog__more-link{border-radius:16px;border:2px solid;padding:12px 14px;font-weight:500;color:var(--marron);font-size:1.25rem;display:inline-block;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s}.blog__more-link:focus,.blog__more-link:hover{padding:12px 14px;-webkit-transform:scale(1.1);transform:scale(1.1)}.supporters-tier ul{display:flex;list-style:none}.supporters-tier li{margin:0 .5rem}@media screen and (prefers-reduced-motion:reduce){:root:not([data-user-reduced-motion]) .blog__more-link{text-decoration:none;padding:12px 14px;border:2px solid}:root:not([data-user-reduced-motion]) .blog__more-link:hover{-webkit-transform:scale(1.05);transform:scale(1.05)}}.featured-image-block{margin:3rem 0;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.11)}.featured-image-block__wrapper{position:relative;padding:3rem 2rem}.featured-image-block__img{position:absolute;right:-14px;top:-56px}.featured-image-block__img img{border-radius:60px;border:6px solid #fed8ce}.source a:focus{padding-bottom:4px;outline:2px solid #1e3650}main p img{max-width:100%;width:100%;height:100%}</style><meta name="generator" content="Gatsby 2.32.13"/><link rel="sitemap" type="application/xml" href="/sitemap.xml"/>
1<link rel="preconnect" href="https://www.google-analytics.com"/><link rel="dns-prefetch" href="https://www.google-analytics.com"/><link rel="alternate" type="application/rss+xml" href="/rss.xml"/><title data-react-helmet="true">'Knowing what you're looking at' - JS tips for new React developers | a11y with Lindsey</title><meta data-react-helmet="true" name="viewport" content="width=device-width"/><meta data-react-helmet="true" name="description" content="I have a confession to make. While I have been a professional web developer for over 6 years, I didn't feel comfortable with JavaScriptâ¦"/><meta data-react-helmet="true" name="keywords" content="accessibility, javascript, react"/><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"/><meta data-react-helmet="true" name="twitter:site" content="@littlekope0903"/><meta data-react-helmet="true" name="twitter:creator" content="@littlekope0903"/><meta data-react-helmet="true" name="twitter:title" content="'Knowing what you're looking at' - JS tips for new React developers"/><meta data-react-helmet="true" name="twitter:description" content="I have a confession to make. While I have been a professional web developer for over 6 years, I didn't feel comfortable with JavaScriptâ¦"/><meta data-react-helmet="true" name="twitter:image" content="https://www.a11ywithlindsey.com/static/8b3c62d91b79af1485c7c4d6a817e7ad/f534f/js-tips.png"/><meta data-react-helmet="true" name="og:url" content="https://www.a11ywithlindsey.com/blog/javascript-tricks-tips"/><meta data-react-helmet="true" name="og:type" content="article"/><meta data-react-helmet="true" name="og:title" content="'Knowing what you're looking at' - JS tips for new React developers"/><meta data-react-helmet="true" name="og:image" content="https://www.a11ywithlindsey.com/static/8b3c62d91b79af1485c7c4d6a817e7ad/f534f/js-tips.png"/><link as="script" rel="preload" href="/component---src-templates-blog-post-js-7bb63e0dd5d181f92da8.js"/><link as="script" rel="preload" href="/app-c9c16c8991030db0db65.js"/><link as="script" rel="preload" href="/framework-25679e2f2e739b4a55ca.js"/><link as="script" rel="preload" href="/styles-407fe62976dc5310c43e.js"/><link as="script" rel="preload" href="/webpack-runtime-04ee07f01a3316bb5a37.js"/><link as="fetch" rel="preload" href="/page-data/blog/javascript-tricks-tips/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/page-data/sq/d/3649515864.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><a class="focusable visually-hidden" href="#main-content">Skip to main content</a><div class="content"><header><div class="header-wrapper"><div class="logo"><a style="color:white;text-decoration:none;border-bottom:none" href="/"><span class="visually-hidden"> <!-- -->a11y with Lindsey<!-- --> </span><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMzEuNDIgNDguMjIiPgogIDxkZWZzPgogICAgPHN0eWxlPi5jbHMtMXtmb250LXNpemU6MTJweDtmb250LWZhbWlseTpQVE1vbm8tUmVndWxhciwgUFQgTW9ubzt9LmNscy0xLC5jbHMtMntmaWxsOiM2NDBkMjM7fTwvc3R5bGU+CiAgPC9kZWZzPgogIDx0aXRsZT5hMTF5IHdpdGggbGluZHNleTwvdGl0bGU+CiAgPGcgaWQ9IndpdGgtbGluZHNleSI+CiAgICA8dGV4dCBjbGFzcz0iY2xzLTEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDgxLjg0IDQwLjQpIj5saW5kc2V5PC90ZXh0PgogICAgPHRleHQgY2xhc3M9ImNscy0xIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzMC44NCA0MC40KSI+d2l0aDwvdGV4dD4KICA8L2c+CiAgPGcgaWQ9ImExMXktaWNvbi1ib2R5Ij4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTTc0Ljc4LDI5LjQ5YTEyLjg5LDEyLjg5LDAsMCwwLDcuOTEtMTEuODgsMSwxLDAsMCwwLTIsMEExMC44OSwxMC44OSwwLDAsMSw3My4zNCwyNy45aDBsLS4wOSwwYTEwLjYzLDEwLjYzLDAsMCwxLTMuNC41NUExMC44OSwxMC44OSwwLDAsMSw1OC45MywxNy42MWExLDEsMCwxLDAtMiwwQTEyLjg5LDEyLjg5LDAsMCwwLDY4Ljg4LDMwLjQ1TDY2LjkzLDQ1LjlsLTQuNTQtLjMxYTEsMSwwLDAsMC0xLjA3LjkzLDEsMSwwLDAsMCwuOTMsMS4wNmw1LjQ4LjM5aC4wN2ExLDEsMCwwLDAsMS0uODhMNzAuOSwzMC40NGExMi43OCwxMi43OCwwLDAsMCwyLS4zM2w0LjI0LDE1LjA3LTQuMzEsMS40N2ExLDEsMCwwLDAtLjYyLDEuMjgsMSwxLDAsMCwwLC45NC42NywxLjI2LDEuMjYsMCwwLDAsLjMzLS4wNWw1LjItMS43OWExLDEsMCwwLDAsLjY0LTEuMjFaTTUyLjA5LDI2LjMzSDQ5LjMzczAsMCwwLS4wOFYxLjM4QTEsMSwwLDAsMCw0Ny44OC41TDQxLjM5LDMuODlBMSwxLDAsMCwwLDQxLDUuMjRhMSwxLDAsMCwwLDEuMzUuNDJsNS0yLjYzVjI2LjI1czAsLjA2LDAsLjA4SDQ0LjU5YTEsMSwwLDAsMCwwLDJoNy41YTEsMSwwLDAsMCwwLTJabS0xMywwSDM2LjM0YS4xOS4xOSwwLDAsMCwwLS4wOFYxLjM4QTEsMSwwLDAsMCwzNC45LjVMMjguNDIsMy44OWExLDEsMCwxLDAsLjkyLDEuNzdsNS0yLjYzVjI2LjI1czAsLjA2LDAsLjA4SDMxLjYxYTEsMSwwLDAsMCwwLDJoNy41YTEsMSwwLDAsMCwwLTJaTTIxLDE3LjMzbDIuNTctMy4yNUExLDEsMCwwLDAsMjIsMTIuODRMMTkuMzMsMTYuMmExMi42NCwxMi42NCwwLDAsMC01LjQ1LTEuN3YtNmExLDEsMCwxLDAtMiwwdjZBMTIuNzgsMTIuNzgsMCwwLDAsNiwxNi40NGwtMi44Ni0zLjZhMSwxLDAsMSwwLTEuNTYsMS4yNGwyLjgxLDMuNTVBMTIuODcsMTIuODcsMCwwLDAsMCwyNy4zM2ExLDEsMCwwLDAsMiwwLDEwLjg5LDEwLjg5LDAsMCwxLDIxLjc3LDAsMSwxLDAsMCwwLDIsMEExMi44NiwxMi44NiwwLDAsMCwyMSwxNy4zM1oiLz4KICA8L2c+CiAgPGcgaWQ9ImExMXktaWNvbi1leWViYWxscyI+CiAgICA8cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Ik0xNi41MywyMy42OUEzLjY1LDMuNjUsMCwxLDEsMTIuODgsMjAsMy42NCwzLjY0LDAsMCwxLDE2LjUzLDIzLjY5WiIvPgogICAgPHBhdGggY2xhc3M9ImNscy0yIiBkPSJNNjkuODEsMjUuMzRhMy42NSwzLjY1LDAsMSwwLTMuNjQtMy42NEEzLjY1LDMuNjUsMCwwLDAsNjkuODEsMjUuMzRaIi8+CiAgPC9nPgo8L3N2Zz4K" alt=""/></a></div><nav class="menu-main"><ul class="menu"><li class="menu-item"><a href="/about">About</a></li><li class="menu-item"><a href="/blog">Blog</a></li><li><a href="https://egghead.io/instructors/lindsey-kopacz">Egghead</a></li></ul></nav></div></header><div><div class="content"><main id="main-content"><div class="content__heading"><div class="wrapper"><nav class="breadcrumb"><ol><li><a href="/">Home</a></li><li><a href="/blog">Blog</a></li><li>'Knowing what you're looking at' - JS tips for new React developers</li></ol></nav><h1>'Knowing what you're looking at' - JS tips for new React developers</h1></div></div><div class="content__body"><div class="wrapper"><p style="font-style:italic"> <!-- -->Note: this blog is an archive and not actively maintained. Some information may be out of date. If you'd like to see what I am working on or work with me in a consulting capacity, visit my website<!-- --> <a href="https://lindseykopacz.com/">lindseykopacz.com</a>.</p><time>August 17, 2020</time><p>I have a confession to make. While I have been a professional web developer for over
16 years, I didnât feel comfortable with JavaScript until a year and a half ago. I still donât feel like I know a lot of things. Thereâs a lot that still confuses me. But Iâve grown a lot in my knowledge in the past year and a half. I wanted to share what Iâve learned.</p><p>My goal is to get more accessibility folks into the JavaScript community. The cryptic vocabulary for JavaScript concepts is intimidating for many folks (including myself). Itâs why I didnât become a JavaScript developer until I was 4.5 years into my career. Many experts say you should know the fundamentals well before learning frameworks. But where is that boundary? What is âknowing the fundamentals?â When do you know enough to jump into React?</p><p>I saw this tweet by <a href="https://twitter.com/EriPDev">Erika</a>, and it inspired a lot of the tone of this blog post.</p><blockquote class="twitter-tweet"><p lang="en" dir="ltr">React is just JS so you need to at least know of the fundamentals and major ES6 concepts. Don't need to be an expert but you need to know what you're looking at</p>â â¨Oobrikoob with a 'k'⨠(@EriPDev) <a href="https://twitter.com/EriPDev/status/1283039172840882178?ref_src=twsrc%5Etfw">July 14, 2020</a></blockquote><p>Something Iâve enjoyed about React is how much Iâve learned about JavaScript from jumping in. But at the same time, jumping in without as Erika says, âknowing what youâre looking at,â you may wind up confused. Below are some of the concepts helpful to me for knowing what I was looking at.</p><p><strong>Prerequisites</strong></p><p>Before you go through this blog post, I highly recommend you take the CodeAcademy <a href="https://www.codecademy.com/learn/introduction-to-javascript">Intro to JavaScript</a> course (the free parts should be enough of an overview). I wonât be going in depth with concepts like âwhat is a variable?â These are all concepts I believe you should understand as well before reading this blog post.</p><p>If you donât want to sign up for CodeAcademy (I get it, I hate signing up for new things too), review at least these concepts on MDN:</p><ul><li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var">Variables</a>: This includes the âsee alsoâ section on <code class="language-text">let</code> and <code class="language-text">const</code></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions">Functions</a>: Iâll be going over Arrow functions in this post, so thatâs not a prerequisite.</li><li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures">Data Types</a>: Donât stress out too much about the vocabulary here. It can be overwhelming. But Iâm going to use words like âstringâ and âobjectâ in this blog post, so you should know what I mean by that.</li><li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Objects</a></li></ul><p>Now letâs get started ð¤</p><h2>Template Literals/Strings</h2><p>Pre ES6/ES2015, rendering JavaScript within a string used to be a HUGE pain. You had to create strings and concatenate the strings and the variables together with a plus sign +.</p><p>Letâs say we have a function that renders a short bio. We pass three arguments into the function. Those arguments will render within the bio.</p><p>Pre ES6 we had to create a bunch of different strings and concatenate them with variables.</p><div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">shortBio</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> age<span class="token punctuation">,</span> job</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> 2 <span class="token keyword">return</span> <span class="token string">"Hi, I'm "</span> <span class="token operator">+</span> name <span class="token operator">+</span> <span class="token string">". I'm "</span> <span class="token operator">+</span>
2 age <span class="token operator">+</span> <span class="token string">" years old and work as a "</span> <span class="token operator">+</span> job <span class="token operator">+</span> <span class="token string">"."</span> 3<span class="token punctuation">}</span></code></pre></div><p>There are a few unideal things for me:</p><ol><li>There are 4 separate strings.</li><li>Itâs hard for me to read. Having random spaces within the strings makes it a harder for me to visualize.</li><li>If you want this string to be multiple lines, it becomes a nightmare. You have to end the string at the end of the line, add a plus sign, and then restart a string on the next line. Take a look at this <a href="https://stackoverflow.com/a/6247331">StackOverflow</a> reply to see how unwieldy it can be.</li></ol><p>In ES6, template strings emerged. To start a template string, you use a backtick ` and start writing the string. Then, we want to inject some other JavaScript into the string. Here we add a dollar sign and starting curly brace. When you finish writing JavaScript logic, you close the curly brace. This formatting results in more readable code.</p><div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">shortBio</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> age<span class="token punctuation">,</span> job</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> 4 <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Hi, I'm </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">. I'm </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>age<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> years old and work as a </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>job<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.</span><span class="token template-punctuation string">`</span></span> 5<span class="token punctuation">}</span></code></pre></div><p>Source: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals">Template Literals - MDN Docs</a></p><h2>Using the spread operator</h2><p>First, what is the spread operator? The spread operator âallows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.â (Source: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax">Spread Syntax - MDN Docs</a>)</p><p>Iâm sorry, what? What does that even mean?</p><p>In my own words, we are taking every item in an array and âexpandingâ it where the items in the array would work, but not the array itself. You can also use the spread operator for every letter in a string, but I rarely use it this way.</p><p>In the more technical sense, letâs take this object:</p><div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js"><span class="token keyword">const</span> person <span class="token operator">=</span> <span class="token punctuation">{</span> 6 name<span class="token operator">:</span> <span class="token string">'Lindsey'</span><span class="token punctuation">,</span> 7 age<span class="token operator">:</span> <span class="token number">30</span><span class="token punctuation">,</span> 8 jobTitle<span class="token operator">:</span> <span class="token string">'Senior UI Engineer'</span><span class="token punctuation">,</span> 9<span class="token punctuation">}</span></code></pre></div><p>And letâs use the <code class="language-text">shortBio</code> function from the previous section to render a bit about me.</p><div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">shortBio</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span>
9 age<span class="token punctuation">,</span> job</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> 10 <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Hi, I'm </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">. I'm </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>age<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> years old and work as a </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>job<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.</span><span class="token template-punctuation string">`</span></span> 11<span class="token punctuation">}</span></code></pre></div><p>And make it into an array using the <code class="language-text">Object.values()</code> method to make it an array of all those values. <code class="language-text">Object.values()</code> takes the values of every property in an object and adds it to a new array <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values">MDN Docs</a></p><div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js"><span class="token keyword">const</span> personArr <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">values</span><span class="token punctuation">(</span>person<span class="token punctuation">)</span></code></pre></div><p>This method will return an array that looks like this</p><div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js"><span class="token punctuation">[</span><span class="token string">"Lindsey"</span><span class="token punctuation">,</span> <span class="token number">30</span><span class="token punctuation">,</span> <span class="token string">"Senior UI Engineer"</span><span class="token punctuation">]</span></code></pre></div><p>Then I can use the spread syntax to iterate every item in the array as each parameter.</p><div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js"><span class="token function">shortBio</span><span class="token punctuation">(</span><span class="token operator">...</span>personArr<span class="token punctuation">)</span></code></pre></div><p>Which would be the same as</p><div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js"><span class="token function">shortBio</span><span class="token punctuation">(</span>person<span class="token punctuation">.</span>name<span class="token punctuation">,</span> person<span class="token punctuation">.</span>age<span class="token punctuation">,</span> person<span class="token punctuation">.</span>jobTitle<span class="token punctuation">)</span></code></pre></div><p>We can also use the spread syntax to make a copy of an object.</p><div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js"><span class="token keyword">const</span> lindsey <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token operator">...</span>person<span class="token punctuation">}</span></code></pre></div><p>If you want to play around with this example, Iâve created a <a href="https://codepen.io/littlekope0903/pen/dyMywYv?editors=1011">CodePen</a>.</p><p>So why is this important? In a React component, we have a <code class="language-text">props</code> object that gets passed in a parent component.</p><p>Consider we have a Page with a <code class="language-text">Layout</code> Component that renders a <code class="language-text">Bio</code>. The Bio component takes on a <code class="language-text">name</code>, <code class="language-text">age</code>, and <code class="language-text">jobTitle</code> prop. If we are in that parent component and have an object handy (like the <code class="language-text">
11person</code> object), we can âspreadâ it into the component. In this example, we will be spreading these props into the <code class="language-text">Bio</code> component:</p><div class="gatsby-highlight" data-language="jsx"><pre class="language-jsx"><code class="language-jsx"><span class="token keyword">const</span> <span class="token function-variable function">BioPage</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span> 12 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Layout</span></span><span class="token punctuation">></span></span><span class="token plain-text"> 13 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Bio</span></span> <span class="token spread"><span class="token punctuation">{</span><span class="token operator">...</span>person<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text"> 14 </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Layout</span></span><span class="token punctuation">></span></span> 15<span class="token punctuation">)</span></code></pre></div><p>This would be equivalent to this:</p><div class="gatsby-highlight" data-language="jsx"><pre class="language-jsx"><code class="language-jsx"><span class="token keyword">const</span> <span class="token function-variable function">BioPage</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span> 16 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Layout</span></span><span class="token punctuation">></span></span><span class="token plain-text"> 17 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Bio</span></span> <span class="token attr-name">name</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>person<span class="token punctuation">.</span>name<span class="token punctuation">}</span></span> <span class="token attr-name">age</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>person<span class="token punctuation">.</span>age<span class="token punctuation">}</span></span> <span class="token attr-name">jobTitle</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>person<span class="token punctuation">.</span>jobTitle<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text"> 18 </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Layout</span></span><span class="token punctuation">></span></span> 19<span class="token punctuation">)</span></code></pre></div><p>You can read more about how this works in the <a href="https://reactjs.org/docs/jsx-in-depth.html#spread-attributes">React Docs</a>.</p><h2>Understanding Arrow functions</h2><p>When defining a function, Iâve found arrow functions are the norm in React. Iâm not saying youâll never see the function keyword. I still see the function keyword from time to time. I recommend getting used to seeing arrow functions and understanding what youâre seeing. Itâll help you improve understanding React code, particularly with callbacks within <code class="language-text">Array.prototype.map()</code> and <code class="language-text">Array.prototype.filter()</code>, which we will discuss a bit later.</p><p>Iâm not going to go over all the intricacies of arrow functions in depth. There are plenty of JavaScript bloggers who will do a much better job at that than I would. You can start off at the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">MDN Docs</a> to see some of the motivations for why this was created. But again, I want you to know what youâre looking at.</p><h3>The syntax:</h3><p>Arrow functions are anonymous functions that you can store in a variable (what I frequently do).</p><p>You have the parentheses, where you have some optional parameters, an arrow thatâs an equal sign and then a greater than sign (=>), and then some curly braces.</p><div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">someVarFunction</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> 20 <span class="token comment">// Do some stuff</span> 21<span class="token punctuation">}</span></code></pre></div><p>The parameters take on many formats, depending on the number of parameters you have. Hereâs the quick cheat sheet:</p><ol><li>0 or more than one parameter = yes you need parentheses</li><li>1 parameter = no parentheses needed</li></ol><div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js"><span class="token comment">// must have parentheses</span> 22<span class="token keyword">const</span> <span class="token function-variable function">function</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> 23 <span class="token comment">// Do some stuff</span> 24<span class="token punctuation">}</span> 25 26<span class="token comment">// must have parentheses</span> 27<span class="token keyword">const</span> <span class="token function-variable function">function2</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">param1<span class="token punctuation">,</span> param2</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> 28 <span class="token comment">// Do some stuff</span> 29<span class="token punctuation">}</span> 30 31<span class="token comment">// no parentheses needed</span> 32<span class="token keyword">const</span> <span class="token function-variable function">function3</span> <span class="token operator">=</span> <span class="token parameter">param1</span> <span class="token operator">=></span> <span class="token punctuation">{</span> 33 <span class="token comment">// Do some stuff</span> 34<span class="token punctuation">}</span></code></pre></div><p>Understanding that I wonât see any parentheses if thereâs only one parameter alleviated so much of my confusion. It helped me understand what I saw when I saw callbacks in the <code class="language-text">.map()</code> method.</p><p>The first way to look at an arrow function is if you have an explicit return. Consider the below example. We have curly braces, some logic happening where we reformat the data and store it in a variable, and then returning some JSX.</p><div class="gatsby-highlight" data-language="jsx"><pre class="language-jsx"><code class="language-jsx"><span class="token keyword">const</span> <span class="token function-variable function">renderComponent</span> <span class="token operator">=</span> <span class="token parameter">content</span> <span class="token operator">=></span> <span class="token punctuation">{</span> 35 <span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token function">formatData</span><span class="token punctuation">(</span>content<span class="token punctuation">)</span> 36 37 <span class="token keyword">return</span> <span class="token punctuation">(</span> 38 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>wrapper<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text"> 39 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Component</span></span> <span class="token spread"><span class="token punctuation">{</span><span class="token operator">...</span>data<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text"> 40 </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> 41 <span class="token punctuation">)</span> 42<span class="token punctuation">}</span></code></pre></div><p>There is one of key part to notice. In this function, we are doing MORE than returning the component. We are formatting some data with something we pass in, and then we are returning a component with that new data.</p><p>
42But what if you donât need to format any data, and youâre only returning one line of JSX? You can do that in one line, remove the <code class="language-text">return</code> keyword, and the curly braces! This formatting is an <strong>implicit return</strong>. JavaScript knows when you format it this way that all youâre doing is returning something.</p><div class="gatsby-highlight" data-language="jsx"><pre class="language-jsx"><code class="language-jsx"><span class="token keyword">const</span> <span class="token function-variable function">ParentComponent</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Component</span></span> <span class="token punctuation">/></span></span></code></pre></div><p>This syntax is saying, âHey, your only job here is to return this single line component.â</p><p>You donât see that very often in React. How often do you have a component that only returns one thing that neatly fits into one line of code? What youâll see more often is an implicit return without curly braces or the return keyword, but wrapped in parentheses because itâs returning multiple lines of code.</p><div class="gatsby-highlight" data-language="jsx"><pre class="language-jsx"><code class="language-jsx"><span class="token keyword">const</span> <span class="token function-variable function">ParentComponent</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span> 43 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>wrapper<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text"> 44 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Component</span></span> <span class="token punctuation">/></span></span><span class="token plain-text"> 45 </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> 46<span class="token punctuation">)</span></code></pre></div><p>This syntax says, âHey, your only job here is to return multiple lines of JSX.â</p><p>Once I understood the differences between the formatting, it became a lot clearer what I was looking at when I was reading the code.</p><h2>Understanding Destructuring</h2><p>Destructuring is a more straightforward way to unpack arrays or objects into unique variables.</p><p>Consider the object from the previous example:</p><div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js"><span class="token keyword">const</span> person <span class="token operator">=</span> <span class="token punctuation">{</span> 47 name<span class="token operator">:</span> <span class="token string">'Lindsey'</span><span class="token punctuation">,</span> 48 age<span class="token operator">:</span> <span class="token number">30</span><span class="token punctuation">,</span> 49 jobTitle<span class="token operator">:</span> <span class="token string">'Senior UI Engineer'</span><span class="token punctuation">,</span> 50<span class="token punctuation">}</span></code></pre></div><p>What if we wanted to have distinct variables for every property in that object for ease of use. For example, saying <code class="language-text">name</code> is way easier than saying <code class="language-text">person.name</code>.</p><p>We could do this:</p><div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js"><span class="token keyword">const</span> name <span class="token operator">=</span> person<span class="token punctuation">.</span>name 51<span class="token keyword">const</span>
51 age <span class="token operator">=</span> person<span class="token punctuation">.</span>age 52<span class="token keyword">const</span> jobTitle <span class="token operator">=</span> person<span class="token punctuation">.</span>jobTitle</code></pre></div><p>Assigning variables works, but if this object had more than 3 properties, it could take up a lot of space to name every variable. This situation is when destructuring comes in handy.</p><p>The code that we defined above is the same as saying</p><div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js"><span class="token keyword">const</span> <span class="token punctuation">{</span> name<span class="token punctuation">,</span> age<span class="token punctuation">,</span> jobTitle <span class="token punctuation">}</span> <span class="token operator">=</span> person</code></pre></div><p>The items inside the curly braces are the properties we want to break out into separate variables. Whatever is inside the curly braces become variable names themselves. To the right of the equal sign is the object name itself.</p><p>Destructuring comes in handy when we are using React props because <code class="language-text">props</code> is an object.</p><p>Consider we are using the <code class="language-text">Layout</code> component from the Spread section:</p><div class="gatsby-highlight" data-language="jsx"><pre class="language-jsx"><code class="language-jsx"><span class="token keyword">const</span> <span class="token function-variable function">BioPage</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span> 53 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Layout</span></span><span class="token punctuation">></span></span><span class="token plain-text"> 54 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Bio</span></span> <span class="token spread"><span class="token punctuation">{</span><span class="token operator">...</span>person<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text"> 55 </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Layout</span></span><span class="token punctuation">></span></span> 56<span class="token punctuation">)</span></code></pre></div><p>Then in the Bio component itself, destructure the props and use the variables in a cleaner way.</p><div class="gatsby-highlight" data-language="jsx"><pre class="language-jsx"><code class="language-jsx"><span class="token keyword">const</span> <span class="token function-variable function">Bio</span> <span class="token operator">=</span> <span class="token parameter">props</span> <span class="token operator">=></span> <span class="token punctuation">{</span> 57 <span class="token keyword">const</span> <span class="token punctuation">{</span> name<span class="token punctuation">,</span> age<span class="token punctuation">,</span> jobTitle <span class="token punctuation">}</span> <span class="token operator">=</span> props 58 <span class="token keyword">return</span> <span class="token punctuation">(</span> 59 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text"> 60 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>name<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text"> 61 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span><span class="token plain-text"> 62 </span><span class="token punctuation">{</span>age<span class="token punctuation">}</span><span class="token plain-text">, </span><span class="token punctuation">{</span>jobTitle<span class="token punctuation">}</span><span class="token plain-text"> 63 </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token plain-text"> 64 </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span> 65 <span class="token punctuation">)</span> 66<span class="token punctuation">}</span></code></pre></div><p>If you understand destructuring and what youâre seeing, this code is more concise than this:</p><div class="gatsby-highlight" data-language="jsx"><pre class="language-jsx"><code class="language-jsx"><span class="token keyword">const</span> <span class="token function-variable function">Bio</span> <span class="token operator">=</span> <span class="token parameter">props</span> <span class="token operator">=></span> <span class="token punctuation">(</span> 67 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text"> 68 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>props<span class="token punctuation">.</span>name<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text"> 69 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span><span class="token plain-text"> 70 </span><span class="token punctuation">{</span>props<span class="token punctuation">.</span>age<span class="token punctuation">}</span><span class="token plain-text">, </span><span class="token punctuation">{</span>props<span class="token punctuation">.</span>jobTitle<span class="token punctuation">}</span><span class="token plain-text"> 71 </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token plain-text"> 72 </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span> 73<span class="token punctuation">)</span></code></pre></div><p>Additionally, you can actually start destructuring in the parameters themselves! The below code renders exactly the same as the past 2 examples.</p><div class="gatsby-highlight" data-language="jsx"><pre class="language-jsx"><code class="language-jsx"><span class="token keyword">const</span> <span class="token function-variable function">Bio</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> name<span class="token punctuation">,</span>
73 age<span class="token punctuation">,</span> jobTitle <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span> 74 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text"> 75 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>name<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text"> 76 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span><span class="token plain-text"> 77 </span><span class="token punctuation">{</span>age<span class="token punctuation">}</span><span class="token plain-text">, </span><span class="token punctuation">{</span>jobTitle<span class="token punctuation">}</span><span class="token plain-text"> 78 </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token plain-text"> 79 </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span> 80<span class="token punctuation">)</span></code></pre></div><p>Source: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">Destructuring Assignment - MDN Docs</a></p><h3>Assigning New Variable Names</h3><p>Itâs helpful to understand assigning a variable something different than the property name. This technique is useful if you have a property name thatâs the same as a variable present in the component.</p><p>Wherever you are destructuring you add a colon and then assign the desired name of the variable:</p><div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js"><span class="token keyword">const</span> <span class="token punctuation">{</span> oldVar<span class="token operator">:</span> newVar <span class="token punctuation">}</span> <span class="token operator">=</span> obj</code></pre></div><p>Letâs simplify the property <code class="language-text">jobTitle</code> to <code class="language-text">job</code></p><p>When we rename <code class="language-text">jobTitle</code> to <code class="language-text">job</code> inside the component, we can write it as such:</p><div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js"><span class="token keyword">const</span> <span class="token punctuation">{</span> name<span class="token punctuation">,</span> age<span class="token punctuation">,</span> jobTitle<span class="token operator">:</span> job <span class="token punctuation">}</span> <span class="token operator">=</span> props</code></pre></div><p>Or we can also rename within the parameters</p><div class="gatsby-highlight" data-language="jsx"><pre class="language-jsx"><code class="language-jsx"><span class="token keyword">const</span> <span class="token function-variable function">Bio</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> name<span class="token punctuation">,</span> age<span class="token punctuation">,</span> jobTitle<span class="token operator">:</span> job <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span> 81 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text"> 82 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>name<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text"> 83 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span><span class="token plain-text"> 84 </span><span class="token punctuation">{</span>age<span class="token punctuation">}</span><span class="token plain-text">, </span><span class="token punctuation">{</span>job<span class="token punctuation">}</span><span class="token plain-text"> 85 </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token plain-text"> 86 </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span> 87<span class="token punctuation">)</span></code></pre></div><p>Source: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Assigning_to_new_variable_names">Destructuring Assignment, Assigning to new variable names - MDN Docs</a></p><h2>The .map() Array Method</h2><p>I am not going to get into <code class="language-text">.reduce()</code> in this blog post because I donât see it as often inside of components as I do <code class="language-text">.map()</code> and <code class="language-text">.filter()</code>. I can recommend a few blog posts that cover reduce better than I can. For example, Monica Powell wrote an <a href="https://www.aboutmonica.com/blog/2020-03-29-understanding-reduce-in-javascript">amazing guide</a> to a variety of ways use <code class="language-text">.reduce()</code>. This blog post clicked so much with me, as someone who admittedly still fumbles with when I want to use reduce.</p><p>OK, back to <code class="language-text">.map()</code> and <code class="language-text">.filter()</code>! These methods go through each item in an array, do something with it, and creates a new array. Letâs cover the structure that youâll see.</p><p>In my experience, when I see this method used, I see it mapping through an <strong>array of objects</strong> or an <strong>
87array of strings</strong>. Each property in the object is usually a piece of data I want to render in the component. So letâs have take this array of country objects.</p><div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js"><span class="token keyword">const</span> countries <span class="token operator">=</span> <span class="token punctuation">[</span> 88 <span class="token punctuation">{</span> 89 city<span class="token operator">:</span> <span class="token string">'London'</span><span class="token punctuation">,</span> 90 code<span class="token operator">:</span> <span class="token string">'UK'</span><span class="token punctuation">,</span> 91 latitude<span class="token operator">:</span> <span class="token number">51.5285578</span><span class="token punctuation">,</span> 92 longitude<span class="token operator">:</span> <span class="token operator">-</span><span class="token number">0.2420242</span> 93 <span class="token punctuation">}</span><span class="token punctuation">,</span> 94 <span class="token punctuation">{</span> 95 city<span class="token operator">:</span> <span class="token string">'Manchester'</span><span class="token punctuation">,</span> 96 code<span class="token operator">:</span> <span class="token string">'UK'</span><span class="token punctuation">,</span> 97 latitude<span class="token operator">:</span> <span class="token number">53.4722249</span><span class="token punctuation">,</span> 98 longitude<span class="token operator">:</span> <span class="token operator">-</span><span class="token number">2.2936739</span> 99 <span class="token punctuation">}</span><span class="token punctuation">,</span> 100 <span class="token punctuation">{</span> 101 city<span class="token operator">:</span> <span class="token string">'Paris'</span><span class="token punctuation">,</span> 102 code<span class="token operator">:</span> <span class="token string">'FR'</span><span class="token punctuation">,</span> 103 latitude<span class="token operator">:</span> <span class="token number">48.8588376</span><span class="token punctuation">,</span> 104 longitude<span class="token operator">:</span> <span class="token number">2.2768487</span> 105 <span class="token punctuation">}</span><span class="token punctuation">,</span> 106 <span class="token punctuation">{</span> 107 city<span class="token operator">:</span> <span class="token string">'Nice'</span><span class="token punctuation">,</span> 108 code<span class="token operator">:</span> <span class="token string">'FR'</span><span class="token punctuation">,</span> 109 latitude<span class="token operator">:</span> <span class="token number">43.703169</span><span class="token punctuation">,</span> 110 longitude<span class="token operator">:</span> <span class="token number">7.1826056</span> 111 <span class="token punctuation">}</span><span class="token punctuation">,</span> 112 <span class="token punctuation">{</span> 113 city<span class="token operator">:</span> <span class="token string">'Berlin'</span><span class="token punctuation">,</span> 114 code<span class="token operator">:</span> <span class="token string">'DE'</span><span class="token punctuation">,</span> 115 latitude<span class="token operator">:</span> <span class="token number">52.5065117</span><span class="token punctuation">,</span> 116 longitude<span class="token operator">:</span> <span class="token number">13.1438688</span> 117 <span class="token punctuation">}</span><span class="token punctuation">,</span> 118 <span class="token punctuation">{</span> 119 city<span class="token operator">:</span> <span class="token string">'Munich'</span><span class="token punctuation">,</span> 120 code<span class="token operator">:</span> <span class="token string">'DE'</span><span class="token punctuation">,</span> 121 latitude<span class="token operator">:</span> <span class="token number">48.1548252</span><span class="token punctuation">,</span> 122 longitude<span class="token operator">:</span> <span class="token number">11.4014097</span> 123 <span class="token punctuation">}</span> 124<span class="token punctuation">]</span><span class="token punctuation">;</span></code></pre></div><p>Letâs say I want to create an accessible table of this data. In this example, I am going to hard code the <code class="language-text"><th></code>. You could also use something like <code class="language-text">Object.keys()</code> (<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">MDN Docs</a>) to grab those keys and use those to render the headers. Letâs get that all rendered out first.</p><div class="gatsby-highlight" data-language="jsx"><pre class="language-jsx"><code class="language-jsx"><span class="token keyword">const</span> <span class="token function-variable function">CountryTable</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span> 125 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span><span class="token punctuation">></span></span><span class="token plain-text"> 126 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span><span class="token plain-text"> 127 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>col<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">City</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span><span class="token plain-text"> 128 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>col<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Country</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span><span class="token plain-text"> 129 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>col<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Longitude</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span><span class="token plain-text"> 130 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>col<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Latitude</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span><span class="token plain-text"> 131 </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span><span class="token plain-text"> 132 </span><span class="token punctuation">{</span><span class="token comment">/* Here we will start some mapping magic */</span><span class="token punctuation">}</span><span class="token plain-text"> 133 </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span> 134<span class="token punctuation">)</span></code></pre></div><p>Now letâs pause to talk about what <code class="language-text">.map()</code> looks like before we get to the mapping magic ð</p><p>Letâs start mapping through that countries array.</p><div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js">countries<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">country</span> <span class="token operator">=></span> <span class="token comment">/* Do Some stuff*/</span><span class="token punctuation">)</span></code></pre></div><p>Inside of the parentheses of the map, we have what we call a <strong>callback</strong>
134. A callback is a function that is called inside another function. In the mapping method, you tend to see them done anonymously - done inside the map method.</p><p>In this instance, the <code class="language-text">country</code> argument is each object inside the array. Instead of writing <code class="language-text">countries[0].city</code>, <code class="language-text">countries[1].city</code>, <code class="language-text">countries[2].city</code>, etc. for every item in the array, you can map through it and apply your logic once.</p><p>Whatâs easier to read?</p><div class="gatsby-highlight" data-language="jsx"><pre class="language-jsx"><code class="language-jsx"><span class="token keyword">const</span> <span class="token function-variable function">CountryTable</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span> 135 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span><span class="token punctuation">></span></span><span class="token plain-text"> 136 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span><span class="token plain-text"> 137 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>col<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">City</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span><span class="token plain-text"> 138 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>col<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Country</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span><span class="token plain-text"> 139 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>col<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Longitude</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span><span class="token plain-text"> 140 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>col<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Latitude</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span><span class="token plain-text"> 141 </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span><span class="token plain-text"> 142 </span><span class="token punctuation">{</span>countries<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">country</span> <span class="token operator">=></span> <span class="token punctuation">(</span> 143 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span><span class="token plain-text"> 144 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>country<span class="token punctuation">.</span>city<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><span class="token plain-text"> 145 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>country<span class="token punctuation">.</span>code<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><span class="token plain-text"> 146 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>country<span class="token punctuation">.</span>longitude<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><span class="token plain-text"> 147 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>country<span class="token punctuation">.</span>latitude<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><span class="token plain-text"> 148 </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> 149 <span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text"> 150 </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span> 151<span class="token punctuation">)</span></code></pre></div><p>or this?</p><div class="gatsby-highlight" data-language="jsx"><pre class="language-jsx"><code class="language-jsx"><span class="token keyword">const</span> <span class="token function-variable function">CountryTable</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span> 152 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span><span class="token punctuation">></span></span><span class="token plain-text"> 153 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span><span class="token plain-text"> 154 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>col<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">City</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span><span class="token plain-text"> 155 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>col<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Country</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span><span class="token plain-text"> 156 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>col<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Longitude</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span><span class="token plain-text"> 157 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>col<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Latitude</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span><span class="token plain-text"> 158 </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span><span class="token plain-text"> 159 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span><span class="token plain-text"> 160 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>countries<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>city<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><span class="token plain-text"> 161 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>countries<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>code<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><span class="token plain-text"> 162 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>countries<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>longitude<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><span class="token plain-text"> 163 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>countries<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>latitude<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><span class="token plain-text"> 164 </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span><span class="token plain-text"> 165 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span><span class="token plain-text"> 166 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>countries<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span>city<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><span class="token plain-text"> 167 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>countries<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span>code<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><span class="token plain-text"> 168 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>countries<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span>longitude<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><span class="token plain-text"> 169 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>countries<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span>latitude<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><span class="token plain-text"> 170 </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span><span class="token plain-text"> 171 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span><span class="token plain-text"> 172 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>countries<span class="token punctuation">[</span><span class="token number">2</span
172><span class="token punctuation">]</span><span class="token punctuation">.</span>city<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><span class="token plain-text"> 173 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>countries<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">.</span>code<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><span class="token plain-text"> 174 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>countries<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">.</span>longitude<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><span class="token plain-text"> 175 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>countries<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">.</span>latitude<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><span class="token plain-text"> 176 </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span><span class="token plain-text"> 177 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span><span class="token plain-text"> 178 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>countries<span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">.</span>code<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><span class="token plain-text"> 179 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>countries<span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">.</span>city<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><span class="token plain-text"> 180 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>countries<span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">.</span>longitude<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><span class="token plain-text"> 181 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>countries<span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">.</span>latitude<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><span class="token plain-text"> 182 </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span><span class="token plain-text"> 183 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span><span class="token plain-text"> 184 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>countries<span class="token punctuation">[</span><span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">.</span>city<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><span class="token plain-text"> 185 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>countries<span class="token punctuation">[</span><span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">.</span>code<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><span class="token plain-text"> 186 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>countries<span class="token punctuation">[</span><span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">.</span>longitude<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><span class="token plain-text"> 187 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>countries<span class="token punctuation">[</span><span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">.</span>latitude<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><span class="token plain-text"> 188 </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span><span class="token plain-text"> 189 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span><span class="token plain-text"> 190 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>countries<span class="token punctuation">[</span><span class="token number">5</span><span class="token punctuation">]</span><span class="token punctuation">.</span>city<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><span class="token plain-text"> 191 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>countries<span class="token punctuation">[</span><span class="token number">5</span><span class="token punctuation">]</span><span class="token punctuation">.</span>code<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><span class="token plain-text"> 192 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>countries<span class="token punctuation">[</span><span class="token number">5</span><span class="token punctuation">]</span><span class="token punctuation">.</span>longitude<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><span class="token plain-text"> 193 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>countries<span class="token punctuation">[</span><span class="token number">5</span><span class="token punctuation">]</span><span class="token punctuation">.</span>latitude<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><span class="token plain-text"> 194 </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span><span class="token plain-text"> 195 </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span> 196<span class="token punctuation">)</span></code></pre></div><p>Once you understand what youâre seeing, mapping through is way easier to read (and write!)</p><p>Think about the <code class="language-text">country</code> being <code class="language-text">countries[index]</code>. Itâs the current item in the array. Many folks use <code class="language-text">item</code> instead of <code class="language-text">country</code>, but I like naming my current item whatever the singular version of the array name is.</p><p>Note that in React if we are mapping through an array, we need to make sure we give each item a unique <code class="language-text">key</code>. If one of the countries in the map updates or is removed, it doesnât impact the entire group of items. The callback inside the map takes on an optional index argument. That represents the index of whatever the current item is in the array. So if itâs the last item of this array, the index would be <code class="language-text">5</code>. If it was the first, it would be <code class="language-text">0</code>. We can use that index parameter to be the <code class="language-text">key</code> inside the map. Read more about <a href="https://reactjs.org/docs/lists-and-keys.html#keys">React Keys</a>.</p><div class="gatsby-highlight" data-language="jsx"><pre class="language-jsx"><code class="language-jsx"><span class="token keyword">const</span> <span class="token function-variable function">CountryTable</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span> 197 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span><span class="token punctuation">></span></span><span class="token plain-text"> 198 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span><span class="token plain-text"> 199 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>col<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">City</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span><span class="token plain-text"> 200 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>col<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Country</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span><span class="token plain-text"> 201 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>col<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Longitude</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span><span class="token plain-text"> 202 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>col<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Latitude</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span><span class="token plain-text"> 203 </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span><span class="token plain-text"> 204 </span><span class="token punctuation">{</span>countries<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">country<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span> 205 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>index<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text"> 206 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span>
206<span class="token punctuation">></span></span><span class="token punctuation">{</span>country<span class="token punctuation">.</span>city<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><span class="token plain-text"> 207 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>country<span class="token punctuation">.</span>code<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><span class="token plain-text"> 208 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>country<span class="token punctuation">.</span>longitude<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><span class="token plain-text"> 209 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>country<span class="token punctuation">.</span>latitude<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><span class="token plain-text"> 210 </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> 211 <span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text"> 212 </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span> 213<span class="token punctuation">)</span></code></pre></div><p>We added parentheses because now we have two arguments in our arrow function. Rememeber talking about that? ð</p><p>Source: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">Array.prototype.map() - MDN Docs</a></p><h2>Only rendering specific data</h2><p>Letâs say youâre on a country page, and that country page has a map of with a bunch of pinpointed cities. You want to use that same array of objects of cities from the API.</p><p>What if we only want to show countries that are in France? We can <code class="language-text">filter</code> using the country code.</p><p>If we are provided the value <code class="language-text">'FR'</code> in some way (like React Context or an API), then we can use that value to get <strong>only</strong> those values from the existing array. This technique is helpful because if we are on the France country page, we likely only want cities in France.</p><p>You will likely see the shorthand version of the filter method. Iâll go through the steps so that we are clear about what we are seeing.</p><p>Letâs say we get some value from an API thatâs called <code class="language-text">country</code> and it returns the value <code class="language-text">FR</code>.</p><div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js"><span class="token keyword">const</span> countryCode <span class="token operator">=</span> <span class="token string">'FR'</span></code></pre></div><p>We want to return only the cities that have a <code class="language-text">code</code> of <code class="language-text">FR</code>. So we can do this:</p><div class="gatsby-highlight" data-language="jsx"><pre class="language-jsx"><code class="language-jsx"><span class="token keyword">const</span> filteredCities <span class="token operator">=</span> countries<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token parameter">country</span> <span class="token operator">=></span> <span class="token punctuation">{</span> 214 <span class="token comment">// if this condition is met</span> 215 <span class="token keyword">if</span><span class="token punctuation">(</span>country<span class="token punctuation">.</span>code <span class="token operator">===</span> countryCode<span class="token punctuation">)</span> <span class="token punctuation">{</span> 216 <span class="token comment">// return that object</span> 217 <span class="token keyword">return</span> country 218 <span class="token punctuation">}</span> 219<span class="token punctuation">}</span><span class="token punctuation">)</span></code></pre></div><p>While this technically works, a better way to think of this is true or false.</p><div class="gatsby-highlight" data-language="jsx"><pre class="language-jsx"><code class="language-jsx"><span class="token keyword">const</span> filteredCities <span class="token operator">=</span> countries<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token parameter">country</span> <span class="token operator">=></span> <span class="token punctuation">{</span> 220 <span class="token comment">// if this condition is met</span> 221 <span class="token keyword">if</span><span class="token punctuation">(</span>country<span class="token punctuation">.</span>code <span class="token operator">===</span> countryCode<span class="token punctuation">)</span> <span class="token punctuation">{</span> 222 <span class="token comment">// return that object</span> 223 <span class="token keyword">return</span> <span class="token boolean">true</span> 224 <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> 225 <span class="token keyword">return</span> <span class="token boolean">
225false</span> 226 <span class="token punctuation">}</span> 227<span class="token punctuation">}</span><span class="token punctuation">)</span></code></pre></div><p>We donât want to alter the country data structure. We want to filter out what we donât need. Because of that, we can simplify this to be in one line:</p><div class="gatsby-highlight" data-language="jsx"><pre class="language-jsx"><code class="language-jsx"><span class="token keyword">const</span> filteredCities <span class="token operator">=</span> countries<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token parameter">country</span> <span class="token operator">=></span> country<span class="token punctuation">.</span>code <span class="token operator">===</span> countryCode<span class="token punctuation">)</span></code></pre></div><p>Then we can map through the <code class="language-text">filteredCities</code> array for that country. Iâm not going to plot any points on a map here because I am atrocious at geography and geolocation. However, you can use the latitude and longitude to plot points on a map.</p><div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js">filteredCities<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">city</span> <span class="token operator">=></span> <span class="token punctuation">{</span> 228 <span class="token comment">// do whatever you have to do.</span> 229<span class="token punctuation">}</span><span class="token punctuation">)</span></code></pre></div><aside class="call-to-action"><p> <span class="gatsby-resp-image-wrapper" style="position:relative;display:block;margin-left:auto;margin-right:auto;max-width:500px"> 230 <span class="gatsby-resp-image-background-image" style="padding-bottom:160.13513513513513%;position:relative;bottom:0;left:0;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAgCAYAAAASYli2AAAACXBIWXMAABYlAAAWJQFJUiTwAAACr0lEQVRIx91WW1NSURQ+P62f0A9o7K2n3u3yUDO95Ev1kj6VNlOTOKFmITLeSoEQETEBQS6jcgDl5uGoeDhw+NprcxIOl6KTL7Vm1myGtffHt9f61mIL4Ud3cLwwhbT1FdIz4+bc+hpZ23sE7t6EQGDXZcnRJxCIGVlduYRWq5lwFVpV4RixZ/cZIKNMRkEz1mg00KjX+ef4i4f/FqDaDLb5zwNXB/t9bwScMDC82qh1g18BaJpx7cWwQRWrawbQTqurap97a22A001AMbiHXPIQ2f0kThIHKByKKOcKKIoZHt/74sa+exNRlxenmWMUjtJ8D+2tSFJTNs8ftAATHh9SwQi+Tc5ia86BnYUVrI1PIrj4Fcr5BbZtiwgtr8MzNQffrB3+Tw4EbEuIe7aQjca7ARVZhnSSx3lJ4gwq8hkOAyEkvH4oFxWUWUxmjM+KJcj5Is5PJb6XbmRkqBeFJdB8zxly+AvZDOz9hN1Pe3+oQx1Q/RuGtW5hs9/qqcFemuxkCX016LB4lOK66tevZJWyjGIqo9ehWYizAqt6Lt+qssimLVl4ZR2b0/Ncg98dq1ibsKCUzsJr/cw1SdrzWD7C+fYD3EyrAfsK37/2xgIxFGmbhzrDUkqElD3huspE4jjYDnItiqEoAvNLcL2zMgAbSgciCmxPLpbknRNz+/i5bh3qWiKrVi6hXipMmnXUlCq/nspWMuvMNG7dHsL8gr09Kf2rTCB05ci6B1GnF36WgiBrudiGH9WihKcjIxAEAfeGh/m5GjunGavcpkM90XTldHgfu6yPd+zLPK+hVRey4Rh2dncxNjoGp9M52MQeRDaG2KCd0jlUDQO2s4MGBfyd/4f/eubGl9569JyggBnX1GqrU+jVdF2WePkYAj3B6NVEjU2UzTgxIzDf0A38ABsnVszbz5y8AAAAAElFTkSuQmCC');background-size:cover;display:block"></span> 231 <img class="gatsby-resp-image-image" alt="Using Filter. Free Egghead Video." title="Using Filter. Free Egghead Video." src="/static/aa76cf2810f5257b6b1055ec09b107c5/0b533/filter-egghead.png" srcSet="/static/aa76cf2810f5257b6b1055ec09b107c5/12f09/filter-egghead.png 148w,/static/aa76cf2810f5257b6b1055ec09b107c5/e4a3f/filter-egghead.png 295w,/static/aa76cf2810f5257b6b1055ec09b107c5/0b533/filter-egghead.png 500w" sizes="(max-width: 500px) 100v
231w, 500px" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0" loading="lazy"/> 232 </span></p><h2>Want to see this in action?</h2><p> I created a 2-minute video!</p><p> <a href="https://egghead.io/lessons/javascript-filtering-through-an-array-of-countries-using-filter">Go To My Free Egghead Lesson</a></p></aside><p>Source: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter">Array.prototype.filter() - MDN Docs</a></p><h2>Restructuring within map or filter ð¤¯</h2><p>Letâs combine two things weâve learned into one. In the <code class="language-text">CountryTable</code> component, we were mapping through and rendering every property. Like we did for the props, we can destructure the variables. Because a callback is a function, and you can destructure the <code class="language-text">country</code> object right there! Letâs destructure all those properties in the parameters:</p><div class="gatsby-highlight" data-language="jsx"><pre class="language-jsx"><code class="language-jsx"><span class="token keyword">const</span> <span class="token function-variable function">CountryTable</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span> 233 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span><span class="token punctuation">></span></span><span class="token plain-text"> 234 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span><span class="token plain-text"> 235 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>col<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">City</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span><span class="token plain-text"> 236 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>col<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Country</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span><span class="token plain-text"> 237 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>col<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Longitude</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span><span class="token plain-text"> 238 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>col<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Latitude</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span><span class="token plain-text"> 239 </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span><span class="token plain-text"> 240 </span><span class="token punctuation">{</span>countries<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>city<span class="token punctuation">,</span> code<span class="token punctuation">,</span> longitude<span class="token punctuation">,</span> latitude<span class="token punctuation">}</span><span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span> 241 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>index<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text"> 242 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>city<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><span class="token plain-text"> 243 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>code<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><span class="token plain-text"> 244 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>longitude<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><span class="token plain-text"> 245 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>latitude<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><span class="token plain-text"> 246 </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> 247 <span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text"> 248 </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span> 249<span class="token punctuation">)</span></code></pre></div><p>For readability sake, I may only destructure if I need one or tw
249o properties in the object. If it got to be more than that, I might transform the callback function into an explicit return and destructure within the curly braces. It depends on what you find more readable: keeping it an implicit return or destructuring within the callback function.</p><h2>Conclusion</h2><p>I originally had more sections written out, but I decided that they werenât necessary to get started. However, because I wanted to include them initially, I want to be sure that I am adding them to research yourself. I learned a lot about the following concepts after I immersed myself in React.</p><ul><li>async/await - <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function">MDN Docs</a></li><li>promises - <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">MDN Docs</a></li><li>Default values in destructuring - <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Default_values">MDN Docs</a></li><li>destructuring arrays - <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Array_destructuring">MDN Docs</a></li></ul><p>If you liked this blog post and are interested in learning more about accessibility, take my <a href="https://a11y-with-lindsey.ck.page/b4e437f629">10 days of a11y</a> free email course.</p><p>Cheers! Have a great week!</p><div class="featured-image-block"><div class="featured-image-block__wrapper"><div class="featured-image-block__img"><img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2ODApLCBxdWFsaXR5ID0gNzUK/9sAQwAIBgYHBgUIBwcHCQkICgwUDQwLCwwZEhMPFB0aHx4dGhwcICQuJyAiLCMcHCg3KSwwMTQ0NB8nOT04MjwuMzQy/9sAQwEJCQkMCwwYDQ0YMiEcITIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIy/8AAEQgAZABkAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/aAAwDAQACEQMRAD8A9yxis3W7k22nSOGAOMCtgqDXMeKSTFHEejc0Ac1YGSUPK5yG6e9WGiUnoKcMQwKg4wKYJcmgCu1ihbp1qNtMGMgVeD5Iq1E470AY8VybV1t7o7omOEc9VP8AhWjbSmC42g8A8D0o1G0jubZhtByKwYL9ljKyt++t2CMT3X+E0Aeo6XdCe3AznHI+laFcZ4Z1JZXKZwVOcfz/AMa7LNAC0UUUAFFGaKAErlfFP/H7br7f1rq65TxOoOqWWehHP4ZoAx5kPFVwhBzVbUtfgtZzHLHIq9m28UsF/FcIHjcMp7igC0g55qzGuTVUOMZzQ19HCu52AA7mgDVWE456GuS8R2DWVyL5FzCwKSr6qf8ADrWnF4stDKIow8p/2VzWnK8OpWbI6YDDlTQBx2j6qbHVIpN+cHDf7Q/+uK9ls51uLZXU5GOD7V88akkulao9uxP7s/IfVe1ex+BtRN7o8eeSq4oA6uiiigAopaKAILu4W0tJrhlLLEhcgdSBXBazrF7rD209nZmOJAx84xmRQCCPmIIAru/PSRCGA5GCDWIsENhY3+mqQsb7pbcH+6eoH0P6EUAeOatrF/mUt5MiRnDMkZAH1JJqjp3iPypRuIRSefT866PW7CNkeBFkTfw4Vcq3ofrXIXWktawSP5LBFGTuoA9Di1C3NmZ2uYVjxneZBiuW1PxJG7lLeNpU7ORgH6ZpkPgR5tE+0I3+liPzNnqeuK0NQ0I6jaw6pYorRyoHKdCp70AYsXiKWCZVaKKPv87H+grprLxU9tsNxBI0bDIeHEi479Dn9Kw00b7VdLJd2s7sAB8o9K6yDSbS3tXumgEGxSxOeeByTQBzXim6stZmtLzTZ0mT/VynoVJ+7kHnnmvRvh3BLbadKkqspQ7RuGM/4/WuZ0Dwfb2ejC4u13Xd2yyMjdE5yBiu60JpRYl5GPzN8oPpQB0Ik96eJBWf5tHnUAaHmiis7z6KAKQnYVHdKl9bPHLGXCqWBGQVOOoI5H1rYfTI2+6cVWk0plBIII9M0AeeXdtchiIr1yOwlRWx+IANY76dLeXUcd1cNMgYNsVQq/U46/ia2NauGs3dB1LYBPQVSimnSIujKWbHJFAHU6fGAhUYPGKwLq0udKuJzZy+XBK5bypE3JuPXGCCp/T2pV1OeOEiMr5xHGc4BqUHUryzaO7mjZDz8qYoApJdakz8W9t9fPI/TbW1ZWNxehDfzx+SCD5ESkBiOm5ieR7YH41huzWsmQ2QOxrX07U/PRShyDQBv3Fu08lvg4WNize4q+sgVQoGAOAKzWmbzEO/ChMFfUnvTvtIx1oA0DLTTNVA3I9aYbketAGh51FZhuuetFAHSC8mH8efqBVeaeaQENKSD2HAqEvTGegDntfsA4LMAVcYPsa4S3+2WFyImkH2RmIYydIz2Oewr1K5VZ4mjfof0rjdQsfJlkjkHyuMEj+dAEVva3pdStrBIGOAyvx0zWkTqMNsXcQxgZAVRuYkHHSsCBJLJPLXIUHIMcrJn8BWzp6SynLKEQ8nByT+NAHNvputXcpuNQnwpb5IU4H44rrLK3is4FAwFQcmrckQwCQAB0rhvHuqzwRR6dAdiOA8pB5I7D9M0AdTJrVurM0k8aD/AGmAqrL4r0uH71/D/wABbP8AKvIQdyFCcN1B/pUIwDyDQB6w/jrSUztuGcgZ+VD/AFqjN8R7Ff8AVW9w598D+tecBo/7jf8AfX/1qPMXtEPxJoA7pviQ275dO495f/rUVwvmD/nkn6/40UAfTJehUkl+4pPv2qroOt6XrEbCAhrhPvRuf1HqKmvr2WLKgYAoAWcQ2yF55QT/AHV/xrjbvVEvdbu7VlVUjjj
249ZAB67sn36D9KvXVxJMTuJNcXql1/Z/i+1lY4juIfKb654/pQB1EIiRssAT2zWrDcx7ACVA9Kx4V81eKtR27qQcUAaOfPkB/gHQetULnwrpPim+vLe6aWC9hSN0miPVGBABU8HBVvTrWhH8qZrL0O9ZviVfWwb7tgoI9wwP/s9AHI6z8Kda07dLazW93bD/lopKsPqp6fgTXK3HhvWYAWksJCB1KEP/ImvpW8QLplzvPWJuPwrxFfETovlO3BABP8AX+VAHBYor3XT9H0Lxb4et5tR0+JrlQUaeP5HJHqRjPGOteZeNfCzeHNVxCh+wTDML5zyByD75oA5iijFFAHR2uo3VhfQ3ltIY5lbIYV7rbTG+soJJ1UmSMM2B6iiigChe2MCAlVIP1ry7x/GqLbSLncshAP4f/WoooA3fD1xJNawM5ySozXYLGpjGaKKAHwxqTz61yWlkw/GC72HG62OfyX/AAoooA9Eu5GeymDHP7tv5V86XJOQfUUUUAeq/DSRpPDsoY5xMcfkKt+P7WK58IXhlXJiAkQ/3WB/wJH40UUAeG0UUUAf/9k=" width="100" height="100" alt=""/></div><div class="featured-image-block__content"><h2 style="margin:0">About Lindsey </h2><p>Lindsey is an accessibility expert, JavaScript lover, and Front End Developer who's passionate about inclusivity both inside and outside the web. Read more about her on the<!-- --> <a href="/about">About Page</a></p></div></div></div></div></div></main></div></div><footer><div class="footer-wrapper"><nav class="footer-menu" style="align-self:flex-start"><ul class="menu"><li class="menu-item"><a href="/about">About</a></li><li class="menu-item"><a href="/blog">Blog</a></li><li><a href="https://egghead.io/instructors/lindsey-kopacz">Egghead</a></li><li class="menu-item privacy-policy"><a href="/privacy-policy">Privacy Policy</a></li></ul></nav><div class="footer-details"><ul class="social"><li><a href="https://www.linkedin.com/in/lindsey-kopacz-70a09033" aria-label="Lindsey's LinkedIn"><i class="fab fa-linkedin-in" aria-hidden="true"></i></a></li><li><a href="https://twitter.com/LittleKope/" aria-label="Lindsey's Twitter"><i class="fab fa-twitter" aria-hidden="true"></i></a></li><li><a href="https://github.com/lkopacz" aria-label="Lindsey's Github"><i class="fab fa-github" aria-hidden="true"></i></a></li></ul></div></div><div class="credit">Logo and Color Scheme design by<!-- --> <a href="https://www.linkedin.com/in/raquel-breternitz/">Raquel Breternitz</a></div></footer></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div>
249<script> 250 251 252 if(true) { 253 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ 254 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 255 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 256 })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); 257 } 258 if (typeof ga === "function") { 259 ga('create', 'UA-122458440-1', 'auto', {}); 260 261 262 263 264 265 }</script>
265<script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/blog/javascript-tricks-tips";/*]]>*/</script>
265<script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-d22790a7c7927829ee5c.js"],"app":["/app-c9c16c8991030db0db65.js"],"component---cache-caches-gatsby-plugin-offline-app-shell-js":["/component---cache-caches-gatsby-plugin-offline-app-shell-js-47c8d8b7529f7a984452.js"],"component---src-pages-2018-year-in-review-index-md":["/component---src-pages-2018-year-in-review-index-md-7e36ad4ac1bc0a9e91bb.js"],"component---src-pages-4-things-ive-learned-about-dyslexia-index-md":["/component---src-pages-4-things-ive-learned-about-dyslexia-index-md-fb8cbf8a54c6e52750d0.js"],"component---src-pages-404-js":["/component---src-pages-404-js-9105c1b52b661e85fbb5.js"],"component---src-pages-a-11-y-taught-js-p-1-index-md":["/component---src-pages-a-11-y-taught-js-p-1-index-md-baaa521f4f042d6084b1.js"],"component---src-pages-a-11-y-taught-js-p-2-index-md":["/component---src-pages-a-11-y-taught-js-p-2-index-md-9c78a3f9c72a0722efad.js"],"component---src-pages-a-11-y-testing-workflow-index-md":["/component---src-pages-a-11-y-testing-workflow-index-md-5072eec7bd8716f2b294.js"],"component---src-pages-about-js":["/component---src-pages-about-js-a634a7feecb654f3ac4d.js"],"component---src-pages-accessible-basic-nav-index-mdx":["/component---src-pages-accessible-basic-nav-index-mdx-145a78c7b6905c52c4d4.js"],"component---src-pages-accessible-styled-checkboxes-index-mdx":["/component---src-pages-accessible-styled-checkboxes-index-mdx-9d88f66b6034d62131c4.js"],"component---src-pages-accessible-styled-radio-index-mdx":["/component---src-pages-accessible-styled-radio-index-mdx-4eea5ef8febd4edd7169.js"],"component---src-pages-aria-labels-index-md":["/component---src-pages-aria-labels-index-md-00b64ae9de57e0c88758.js"],"component---src-pages-aria-states-index-mdx":["/component---src-pages-aria-states-index-mdx-8d61eff6bf020cf9cb60.js"],"component---src-pages-blog-birthday-1-index-md":["/component---src-pages-blog-birthday-1-index-md-1475138db4ca702a553e.js"],"component---src-pages-blog-js":["/component---src-pages-blog-js-51eb9cf945d0e3813104.js"],"component---src-pages-cli-tools-index-md":["/component---src-pages-cli-tools-index-md-5f30ea05ecfaeed8b162.js"],"component---src-pages-color-and-accessibility-index-md":["/component---src-pages-color-and-accessibility-index-md-23e02559abbc593a9c64.js"],"component---src-pages-data-viz-a-11-y-bar-chart-index-mdx":["/component---src-pages-data-viz-a-11-y-bar-chart-index-mdx-a90ae6d29b13fa2908b6.js"],"component---src-pages-donut-chart-index-md":["/component---src-pages-donut-chart-index-md-a41753978d1183f30803.js"],"component---src-pages-first-month-blogging-index-md":["/component---src-pages-first-month-blogging-index-md-0864b5ff08461051a9e5.js"],"component---src-pages-focus-within-index-md":["/component---src-pages-focus-within-index-md-8caf05d0403fa4d3564a.js"],"component---src-pages-html-5-aria-index-md":["/component---src-pages-html-5-aria-index-md-075b77dd86deec1b46d8.js"],"component---src-pages-index-js":["/component---src-pages-index-js-e7ddbcd01a9d56b9c798.js"],"component---src-pages-input-range-index-mdx":["/component---src-pages-input-range-index-mdx-ca6a45435d92d4b18530.js"],"component---src-pages-js-a-11-y-index-md":["/component---src-pages-js-a-11-y-index-md-0c8cdd7f5d545f0d4139.js"],"component---src-pages-js-accordion-index-md":["/component---src-pages-js-accordion-index-md-c197ef475baf396d0e5e.js"],"component---src-pages-js-tips-index-mdx":["/component---src-pages-js-tips-index-mdx-98c2242788d31e558911.js"],"component---src-pages-keyboard-accessibility-101-index-md":["/component---src-pages-keyboard-accessibility-101-index-md-309be05a43452239777f.js"],"component---src-pages-manual-testing-checklist-index-md":["/component---src-pages-manual-testing-checklist-index-md-bd58d3233712e3b03ce2.js"],"component---src-pages-my-blogging-workflow-index-md":["/component---src-pages-my-blogging-workflow-index-md-5937a3c244d09236d9de.js"],"component---src-pages-my-rant-this-isnt-edge-case-index-md":["/component---src-pages-my-rant-this-isnt-edge-case-index-md-fb032cbf703f451e317d.js"],"component---src-pages-negative-impact-inaccessible-forms-index-md":["/component---src-pages-negative-impact-inaccessible-forms-index-md-87f10f0ec741b1bc1363.js"],"component---src-pages-podcast-a-11-y-index-md":["/component---src-pages-podcast-a-11-y-index-md-d691a0a51bbf0faafcc3.js"],"component---src-pages-privacy-policy-js":["/component---src-pages-privacy-policy-js-75c24a7d6f1704329ac4.js"],"component---src-pages-react-packages-a-11-y-index-mdx":["/component---src-pages-react-packages-a-11-y-index-mdx-b10e2f78dbd62f951915.js"],"component---src-pages-reduce-motion-index-md":["/component---src-pages-reduce-motion-index-md-7e2a1f550bea9fcc0ced.js"],"component---src-pages-speaker-accessibility-index-md":["/component---src-pages-speaker-accessibility-index-md-6da78a9a1aeabb2cabfb.js"],"component---src-pages-thank-you-order-js":["/component---src-pages-thank-you-order-js-52a50d7cff3629b1106e.js"],"component---src-pages-thanks-digest-js":["/component---src-pages-thanks-digest-js-0b6ed1ecacbebe316533.js"],"component---src-pages-thanks-egghead-js":["/component---src-pages-thanks-egghead-js-3a320d4c621f5772281d.js"],"component---src-pages-thanks-email-course-js":["/component---src-pages-thanks-email-course-js-14f5384ca3de8db85d7a.js"],"component---src-pages-thanksgiving-2018-index-md":["/component---src-pages-thanksgiving-2018-index-md-1e92c5c8a3ba3721e340.js"],"component---src-pages-transitioning-from-remote-index-md":["/component---src-pages-transitioning-from-remote-index-md-f1b41fae929af23657d4.js"],"component---src-pages-twitter-a-11-y-index-md":["/component---src-pages-twitter-a-11-y-index-md-d0a912665ab0b5d3fc26.js"],"component---src-pages-writing-alternative-text-that-matters-index-md":["/component---src-pages-writing-alternative-text-that-matters-index-md-c764088123aced4a7b8d.js"],"component---src-templates-blog-post-js":["/component---src-templates-blog-post-js-7bb63e0dd5d181f92da8.js"]};/*]]>*/</script>
265<script src="/polyfill-d22790a7c7927829ee5c.js" nomodule=""></script>
265<script src="/webpack-runtime-04ee07f01a3316bb5a37.js" async=""></script>
265<script src="/styles-407fe62976dc5310c43e.js" async=""></script>
265<script src="/framework-25679e2f2e739b4a55ca.js" async=""></script>
265<script src="/app-c9c16c8991030db0db65.js" async=""></script>
265<script src="/component---src-templates-blog-post-js-7bb63e0dd5d181f92da8.js" async=""></script>
265</body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.