component---src-content-class-components-mdx-e7a716dd22adc6d3332d.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[7,6,9,19],{Th6I:function(a,s,e){"use strict";var n=e("PgR7"),t=e.n(n),c=e("CxXQ"),b=e("Nhdc"),p=e("poQC"),m=c.b.div.withConfig({displayName:"default__Grid",componentId:"cc4rlb-0"})(["display:grid;grid-template-areas:'left-void nav     right-void' 'left-void content right-void';grid-template-columns:1fr minmax(0,85ch) 1fr;padding:0 0.5rem;@media (min-width:","){grid-template-areas:'nav content void';grid-template-columns:1fr 85ch 1fr;padding:1rem;max-width:150ch;margin:0 auto;}"],(function(a){return a.theme.breakpoints.xl})),j=c.b.div.withConfig({displayName:"default__NavigationSlot",componentId:"cc4rlb-1"})(["grid-area:nav;"]),O=c.b.main.withConfig({displayName:"default__Content",componentId:"cc4rlb-2"})(["grid-area:content;"]),N=c.b.div.withConfig({displayName:"default__Paging",componentId:"cc4rlb-3"})(["display:grid;grid-template-areas:'next' 'prev';@media (min-width:","){grid-template-areas:'prev void next';grid-template-columns:auto 1fr auto;}"],(function(a){return a.theme.breakpoints.sm})),r=Object(c.b)(b.Prev).withConfig({displayName:"default__StyledPrev",componentId:"cc4rlb-4"})(["grid-area:prev;"]),i=Object(c.b)(b.Next).withConfig({displayName:"default__StyledNext",componentId:"cc4rlb-5"})(["grid-area:next;justify-self:flex-end;"]);s.a=function(a){var s=a.children,e=Object(b.useSlug)(),n=Object(p.a)(e);return t.a.createElement(t.a.Fragment,null,t.a.createElement(b.SEO,{title:n}),t.a.createElement(b.DefaultThemeProvider,null,t.a.createElement(m,null,t.a.createElement(j,null,t.a.createElement(b.Navigation,null)),t.a.createElement(O,null,t.a.createElement("article",null,t.a.createElement(b.DefaultMDXProvider,null,s)),t.a.createElement(N,null,t.a.createElement(r,null),t.a.createElement(i,null)),t.a.createElement(b.Footer,null)))))}},yRQ4:function(a,s,e){"use strict";e.r(s),e.d(s,"_frontmatter",(function(){return N})),e.d(s,"default",(function(){return g}));var n,t=e("35sm"),c=e("PgR7"),b=e("blud"),p=e("sVQ+"),m=e("NZ9z"),j=e("fFlo"),O=e("Th6I"),N={},r=(n="Example",function(a){return console.warn("Component "+n+" was not imported, exported, or provided by MDXProvider as global scope"),Object(b.b)("div",a)}),i={_frontmatter:N},l=O.a;function g(a){var s=a.components,e=Object(t.a)(a,["components"]);return Object(b.b)(l,Object.assign({},i,e,{components:s,mdxType:"MDXLayout"}),Object(b.b)("h2",{id:"class-components"},"Class Components",Object(b.b)("a",Object.assign({parentName:"h2"},{href:"#class-components","aria-hidden":!0,tabIndex:-1,className:"slug"}),"#")),Object(b.b)("h3",{id:"what"},"What?",Object(b.b)("a",Object.assign({parentName:"h3"},{href:"#what","aria-hidden":!0,tabIndex:-1,className:"slug"}),"#")),Object(b.b)("ul",null,Object(b.b)("li",{parentName:"ul"},"class components used to be the first class citizens"),Object(b.b)("li",{parentName:"ul"},"has state, props, and lifecycle methods"),Object(b.b)("li",{parentName:"ul"},"error prone, unless dead simple")),Object(b.b)("h3",{id:"why"},"Why?",Object(b.b)("a",Object.assign({parentName:"h3"},{href:"#why","aria-hidden":!0,tabIndex:-1,className:"slug"}),"#")),Object(b.b)("ul",null,Object(b.b)("li",{parentName:"ul"},"legacy, mainly"),Object(b.b)("li",{parentName:"ul"},"please use ",Object(b.b)("inlineCode",{parentName:"li"},"FC")," whenever possible"),Object(b.b)("li",{parentName:"ul"},"migrate class components to ",Object(b.b)("inlineCode",{parentName:"li"},"FC")," if possible")),Object(b.b)("h3",{id:"how"},"How?",Object(b.b)("a",Object.assign({parentName:"h3"},{href:"#how","aria-hidden":!0,tabIndex:-1,className:"slug"}),"#")),Object(b.b)("ul",null,Object(b.b)("li",{parentName:"ul"},"use ",Object(b.b)("a",Object.assign({parentName:"li"},{href:"https://reactjs.org/docs/faq-functions.html#class-properties-stage-3-proposal",target:"_blank",rel:"noreferrer"}),"arrow functions")," instead of methods ",Object(b.b)("a",Object.assign({parentName:"li"},{href:"https://reactjs.org/docs/faq-functions.html#why-is-binding-necessary-at-all",target:"_blank",rel:"noreferrer"}),"(docs)"))),Object(b.b)("h4",{id:"render"},Object(b.b)("inlineCode",{parentName:"h4"},"render"),Object(b.b)("a",Object.assign({parentName:"h4"},{href:"#render","aria-hidden":!0,tabIndex:-1,className:"slug"}),"#")),Object(b.b)("ul",null,Object(b.b)("li",{parentName:"ul"},"examine ",Object(b.b)("inlineCode",{parentName:"li"},"state")," and ",Object(b.b)("inlineCode",{parentName:"li"},"props")," -> return JSX"),Object(b.b)("li",{parentName:"ul"},"MUST BE PURE"),Object(b.b)("li",{parentName:"ul"},"can’t use hooks 😞")),Object(b.b)(r,{link:"https://codesandbox.io/s/8k6ih?file=/src/example.tsx",testLink:"https://codesandbox.io/s/p5428?file=/src/example.tsx",code:Object(b.b)(c.Fragment,null,Object(b.b)("pre",{className:"grvsc-container dracula","data-language":"tsx","data-index":"0"},Object(b.b)("code",Object.assign({parentName:"pre"},{className:"grvsc-code"}),Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"import"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," React, { Component, ReactNode } "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"from"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"react"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"interface"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"CounterProps"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  defaultValue"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"number"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"interface"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"CounterState"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  value"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"number"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"class"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3"}),"Counter"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"extends"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"Component"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"CounterProps"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"CounterState"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"> {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"static"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," defaultProps "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," { defaultValue"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"0"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," }"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  state "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," { value"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5 mtki"}),"this"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),".props.defaultValue }"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"decrement"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ()"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"void"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5 mtki"}),"this"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"."),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"setState"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(({ "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"value"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," }) "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ({ value"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," value "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"-"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"1"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," }))"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"increment"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ()"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"void"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5 mtki"}),"this"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"."),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"setState"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(({ "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"value"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," }) "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ({ value"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," value "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"+"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"1"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," }))"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"badIncrement"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"()"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"void"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// `this` is not bound"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5 mtki"}),"this"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"."),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"setState"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(({ "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"value"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," }) "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ({ value"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," value "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"+"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"1"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," }))"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  }"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"render"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ()"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"ReactNode"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," { value } "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5 mtki"}),"this"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),".state"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"return"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ("))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      <"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"div"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        <"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"button"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"type"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"button"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"onClick"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5 mtki"}),"this"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),".decrement}>"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"          -"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        </"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"button"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        <"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"span"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"> {value} </"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"span"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        <"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"button"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"type"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"button"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"onClick"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5 mtki"}),"this"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),".increment}>"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"          +"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        </"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"button"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      </"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"div"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    )"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  }"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"default"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ("))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  <>"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    <"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"Counter"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," />"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    <"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"Counter"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"defaultValue"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"5"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"} />"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  </>"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),")")))))),render:Object(b.b)(c.Fragment,null,Object(b.b)(c.Fragment,null,j.a)),mdxType:"Example"}),Object(b.b)("h4",{id:"componentdidmount"},Object(b.b)("inlineCode",{parentName:"h4"},"componentDidMount"),Object(b.b)("a",Object.assign({parentName:"h4"},{href:"#componentdidmount","aria-hidden":!0,tabIndex:-1,className:"slug"}),"#")),Object(b.b)("ul",null,Object(b.b)("li",{parentName:"ul"},"after component rendered to DOM"),Object(b.b)("li",{parentName:"ul"},"use for:",Object(b.b)("ul",{parentName:"li"},Object(b.b)("li",{parentName:"ul"},"data fetching"),Object(b.b)("li",{parentName:"ul"},"manipulating DOM")))),Object(b.b)("h4",{id:"componentdidupdate"},Object(b.b)("inlineCode",{parentName:"h4"},"componentDidUpdate"),Object(b.b)("a",Object.assign({parentName:"h4"},{href:"#componentdidupdate","aria-hidden":!0,tabIndex:-1,className:"slug"}),"#")),Object(b.b)("ul",null,Object(b.b)("li",{parentName:"ul"},"after ",Object(b.b)("inlineCode",{parentName:"li"},"state")," or ",Object(b.b)("inlineCode",{parentName:"li"},"props")," update"),Object(b.b)("li",{parentName:"ul"},"usually a copy of ",Object(b.b)("inlineCode",{parentName:"li"},"componentDidMount"))),Object(b.b)("h4",{id:"setstate"},Object(b.b)("inlineCode",{parentName:"h4"},"setState"),Object(b.b)("a",Object.assign({parentName:"h4"},{href:"#setstate","aria-hidden":!0,tabIndex:-1,className:"slug"}),"#")),Object(b.b)("ul",null,Object(b.b)("li",{parentName:"ul"},"triggers render"),Object(b.b)("li",{parentName:"ul"},"multiple calls are ",Object(b.b)("a",Object.assign({parentName:"li"},{href:"https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous",target:"_blank",rel:"noreferrer"}),"batched")),Object(b.b)("li",{parentName:"ul"},"always use ",Object(b.b)("inlineCode",{parentName:"li"},"setState")," to update state"),Object(b.b)("li",{parentName:"ul"},Object(b.b)("code",Object.assign({parentName:"li"},{className:"inline dracula","data-language":"ts","data-index":"0"}),Object(b.b)("span",Object.assign({parentName:"code"},{className:"mtk5 mtki"}),"this"),Object(b.b)("span",Object.assign({parentName:"code"},{className:"mtk1"}),"."),Object(b.b)("span",Object.assign({parentName:"code"},{className:"mtk1"}),"state"),Object(b.b)("span",Object.assign({parentName:"code"},{className:"mtk1"}),"."),Object(b.b)("span",Object.assign({parentName:"code"},{className:"mtk1"}),"something"),Object(b.b)("span",Object.assign({parentName:"code"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"code"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"code"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"code"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"code"},{className:"mtk7"}),"bad"),Object(b.b)("span",Object.assign({parentName:"code"},{className:"mtk11"}),"'")))),Object(b.b)("h4",{id:"componentwillunmount"},Object(b.b)("inlineCode",{parentName:"h4"},"componentWillUnmount"),Object(b.b)("a",Object.assign({parentName:"h4"},{href:"#componentwillunmount","aria-hidden":!0,tabIndex:-1,className:"slug"}),"#")),Object(b.b)("ul",null,Object(b.b)("li",{parentName:"ul"},"before removing component from DOM"),Object(b.b)("li",{parentName:"ul"},"use for:",Object(b.b)("ul",{parentName:"li"},Object(b.b)("li",{parentName:"ul"},"freeing resources"),Object(b.b)("li",{parentName:"ul"},"canceling requests")))),Object(b.b)("h4",{id:"other-lifecycle-methods"},"Other lifecycle methods",Object(b.b)("a",Object.assign({parentName:"h4"},{href:"#other-lifecycle-methods","aria-hidden":!0,tabIndex:-1,className:"slug"}),"#")),Object(b.b)("ul",null,Object(b.b)("li",{parentName:"ul"},Object(b.b)("a",Object.assign({parentName:"li"},{href:"https://reactjs.org/docs/react-component.html",target:"_blank",rel:"noreferrer"}),"docs")),Object(b.b)("li",{parentName:"ul"},Object(b.b)("a",Object.assign({parentName:"li"},{href:"https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/",target:"_blank",rel:"noreferrer"}),"lifecycle methods cheat sheet"))),Object(b.b)("h3",{id:"bitcoin-price"},"Bitcoin Price",Object(b.b)("a",Object.assign({parentName:"h3"},{href:"#bitcoin-price","aria-hidden":!0,tabIndex:-1,className:"slug"}),"#")),Object(b.b)(r,{link:"https://codesandbox.io/s/gtrww?file=/src/example.tsx",testLink:"https://codesandbox.io/s/2j79n?file=/src/example.tsx",code:Object(b.b)(c.Fragment,null,Object(b.b)("pre",{className:"grvsc-container dracula","data-language":"tsx","data-index":"1"},Object(b.b)("code",Object.assign({parentName:"pre"},{className:"grvsc-code"}),Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"import"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," React, { Component, ReactNode } "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"from"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"react"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"import"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," { BitcoinAPI } "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"from"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"./bitcoin-api"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"interface"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"BitcoinProps"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {}"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"interface"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"BitcoinState"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  price"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"number"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"|"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"null"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  fiat"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"gbp"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"|"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"usd"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"class"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3"}),"Bitcoin"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"extends"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"Component"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"BitcoinProps"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"BitcoinState"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"> {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  state "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," { price"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"null"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", fiat"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"gbp"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," } "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"as"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  mounted "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"false"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"componentDidMount"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ()"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"void"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5 mtki"}),"this"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),".mounted "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"true"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5 mtki"}),"this"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"."),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"updatePrice"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"()"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  }"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"componentDidUpdate"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ("))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"prevProps"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"BitcoinProps"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),","))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"prevState"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"BitcoinState"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),","))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  )"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"void"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," { fiat } "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5 mtki"}),"this"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),".state"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"if"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," (prevState.fiat "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"!=="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," fiat) {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5 mtki"}),"this"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"."),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"updatePrice"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"()"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    }"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  }"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"componentWillUnmount"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ()"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"void"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5 mtki"}),"this"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),".mounted "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"false"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  }"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"private"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"setGbp"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," () "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5 mtki"}),"this"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"."),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"setState"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"({ fiat"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"gbp"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," })"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"private"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"setUsd"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," () "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5 mtki"}),"this"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"."),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"setState"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"({ fiat"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"usd"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," })"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"private"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"getSymbol"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," () "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ({ gbp"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"£"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", usd"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"$"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," }["),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5 mtki"}),"this"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),".state.fiat])"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"private"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"updatePrice"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"async"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," () "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5 mtki"}),"this"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"."),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"setState"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"({ price"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"null"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," })"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," { fiat } "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5 mtki"}),"this"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),".state"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," value "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"await"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," BitcoinAPI."),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"getPrice"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(fiat)."),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"catch"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(() "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"NaN"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),")"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"if"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ("),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5 mtki"}),"this"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),".mounted) "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5 mtki"}),"this"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"."),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"setState"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"({ fiat, price"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," value })"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  }"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"render"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ()"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"ReactNode"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," { price } "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5 mtki"}),"this"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),".state"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"return"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ("))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      <"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"div"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        <"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"button"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"type"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"button"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"onClick"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5 mtki"}),"this"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),".setGbp}>"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"          £"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        </"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"button"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        <"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"button"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"type"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"button"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"onClick"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5 mtki"}),"this"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),".setUsd}>"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"          $"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        </"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"button"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        <"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"br"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," />"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        {price "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"null"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"?"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ("))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"          <"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"span"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">loading price...</"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"span"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        ) "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ("))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"          <"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"span"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"            {"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5 mtki"}),"this"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"."),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"getSymbol"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"()}"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"            {price}"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"          </"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"span"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        )}"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      </"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"div"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    )"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  }"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"default"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," <"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"Bitcoin"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," />")))))),render:Object(b.b)(c.Fragment,null,Object(b.b)(c.Fragment,null,m.a)),mdxType:"Example"}),Object(b.b)("ul",null,Object(b.b)("li",{parentName:"ul"},"there is a subtle race-condition above; hard to resolve elegantly"),Object(b.b)("li",{parentName:"ul"},"cf. ",Object(b.b)("inlineCode",{parentName:"li"},"FC")," style below; shorter, simpler & race-condition free")),Object(b.b)(r,{link:"https://codesandbox.io/s/gtrww?file=/src/fc-example.tsx",testLink:"https://codesandbox.io/s/2j79n?file=/src/fc-example.tsx",code:Object(b.b)(c.Fragment,null,Object(b.b)("pre",{className:"grvsc-container dracula","data-language":"tsx","data-index":"2"},Object(b.b)("code",Object.assign({parentName:"pre"},{className:"grvsc-code"}),Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"import"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," React, { FC, useCallback, useEffect, useMemo, useState } "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"from"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"react"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"import"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," { BitcoinAPI } "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"from"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"./bitcoin-api"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"Bitcoin"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"FC"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," () "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," [fiat, setFiat] "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"useState"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"gbp"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"|"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"usd"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">("),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"gbp"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),")"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," setGbp "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"useCallback"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(() "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"setFiat"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"gbp"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"), [])"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," setUsd "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"useCallback"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(() "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"setFiat"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"usd"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"), [])"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," [price, setPrice] "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"useState"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"number"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"|"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"null"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">("),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"null"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),")"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"useEffect"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(() "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"let"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," shouldUpdate "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"true"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"setPrice"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"null"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),")"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    BitcoinAPI."),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"getPrice"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(fiat)"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      ."),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"then"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(("),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"v"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),") "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," shouldUpdate "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"&&"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"setPrice"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(v))"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      ."),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"catch"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(() "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," shouldUpdate "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"&&"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"setPrice"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"NaN"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"))"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"return"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," () "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      shouldUpdate "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"false"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    }"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  }, [fiat])"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," symbol "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"useMemo"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(() "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ({ gbp"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"£"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", usd"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"$"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," }[fiat]), [fiat])"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"return"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ("))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    <"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"div"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      <"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"button"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"type"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"button"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"onClick"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{setGbp}>"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        £"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      </"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"button"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      <"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"button"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"type"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"button"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"onClick"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{setUsd}>"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        $"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      </"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"button"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      <"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"br"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," />"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      {price "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"null"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"?"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ("))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        <"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"span"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">loading price...</"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"span"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      ) "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ("))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        <"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"span"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"          {symbol}"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"          {price}"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        </"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"span"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      )}"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    </"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"div"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  )"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"default"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," <"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"Bitcoin"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," />")))))),render:Object(b.b)(c.Fragment,null,Object(b.b)(c.Fragment,null,p.a)),mdxType:"Example"}),Object(b.b)("style",{className:"grvsc-styles"},"\n  \n  .dracula {\n    color: #F8F8F2;\n    background-color: #282A36;\n  }\n  .dracula .mtki { font-style: italic; }\n  .dracula .mtk6 { color: #FF79C6; }\n  .dracula .mtk1 { color: #F8F8F2; }\n  .dracula .mtk11 { color: #E9F284; }\n  .dracula .mtk7 { color: #F1FA8C; }\n  .dracula .mtk3 { color: #8BE9FD; }\n  .dracula .mtk8 { color: #FFB86C; }\n  .dracula .mtk5 { color: #BD93F9; }\n  .dracula .mtk9 { color: #50FA7B; }\n  .dracula .mtk4 { color: #6272A4; }\n  .dracula .grvsc-line-highlighted::before {\n    background-color: var(--grvsc-line-highlighted-background-color, rgba(255, 255, 255, 0.1));\n    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, rgba(255, 255, 255, 0.5));\n  }\n"))}g.isMDXComponent=!0}}]);
//# sourceMappingURL=component---src-content-class-components-mdx-e7a716dd22adc6d3332d.js.map