Enhanced PHP File Manager

⬆️ Go Up (..)

📊 Server Information

Server:

LiteSpeed

System:

Linux 5.14.0-687.66.1.el9_8.x86_64

PHP Version:

8.2.35

User:

flightbo

Directory:

/home2/flightbo/public_html/surecertificate.online/interview-questions/web-development

Free Space:

137.09 GB

🔧 Quick Actions

✏️ Editing: react.php

<?php include __DIR__ . '/../../header.php'; ?>
<div><section data-id="Interview Detail Banner" id="Interview Detail Banner" class="py-spacing44 sm:py-spacing48 xl:px-spacing80 sm:px-spacing112 px-0 !pb-0 !pt-spacing20 md:!bg-offWhite"><div class="px-spacing20 md:px-0 w-full 2xl:max-w-7xl mx-auto"><div class="row g-4"><div class="col-12 md:flex-col"><ol itemscope="" itemtype="https://schema.org/BreadcrumbList" class="flex h-8 w-auto justify-start items-center bg-transparent md:!bg-offWhite xs:!bg-yellow1"><li class="flex items-center text-xs font-normal h-8 group ease-in-out duration-500 transition text-neutral-500" itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem"><a href="" class="px-spacing8 h-full cursor-pointer flex rounded-128 items-center group-hover:bg-mono-black/4 duration-500 ease-in-out transition justify-center" itemprop="item"><div itemprop="name" content="Home"><div class="text-xs text-neutral-600 group-hover:font-medium group-hover:underline group-hover:underline-offset-3 group-hover:text-mono-black">Home</div></div></a><meta itemprop="position" content="1"><i class=" icon-chevron-right text-xl leading-5 text-neutral-600  md:text-neutral-400 self-center "></i></li><li class="flex items-center text-xs font-normal h-8 group ease-in-out duration-500 transition text-neutral-500" itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem"><a href="interview-questions" class="px-spacing8 h-full cursor-pointer flex rounded-128 items-center group-hover:bg-mono-black/4 duration-500 ease-in-out transition justify-center" itemprop="item"><div itemprop="name"><div class="text-xs text-neutral-500 group-hover:font-medium group-hover:underline group-hover:underline-offset-3 group-hover:text-mono-black max-w-50 overflow-ellipsis whitespace-nowrap overflow-hidden">Interview Questions</div></div></a><meta itemprop="position" content="2"><i class=" icon-chevron-right text-xl leading-5 text-neutral-600  md:text-neutral-400 self-center "></i></li><li class="flex items-center text-xs font-normal h-8 group ease-in-out duration-500 transition text-neutral-500" itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem"><a href="interview-questions/web-development" class="px-spacing8 h-full cursor-pointer flex rounded-128 items-center group-hover:bg-mono-black/4 duration-500 ease-in-out transition justify-center" itemprop="item"><div itemprop="name"><div class="text-xs text-neutral-500 group-hover:font-medium group-hover:underline group-hover:underline-offset-3 group-hover:text-mono-black max-w-50 overflow-ellipsis whitespace-nowrap overflow-hidden">Web Development</div></div></a><meta itemprop="position" content="3"><i class=" icon-chevron-right text-xl leading-5 text-neutral-600  md:text-neutral-400 self-center "></i></li><li class="flex items-center text-xs font-normal h-8 group ease-in-out duration-500 transition text-neutral-500" itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem"><span class="overflow-hidden px-spacing8 "><div itemprop="name"><div class="text-xs text-neutral-500 max-w-50 overflow-ellipsis whitespace-nowrap overflow-hidden">React</div></div></span><meta itemprop="position" content="4"><i class=" hidden"></i></li></ol></div></div></div></section></div><div><section data-id="Interview Detail Banner" id="Interview Detail Banner" class="py-spacing44 sm:py-spacing48 xl:px-spacing80 sm:px-spacing112 px-0 bg-offWhite !py-0 !pb-0"><div class="px-spacing20 md:px-0 w-full 2xl:max-w-7xl mx-auto"><div class="row g-4"><div class="col-12 md:flex-col"><div class="flex flex-col md:flex-row md:items-center md:justify-between bg-offWhite  md:pt-spacing20 md:pb-[48px]"><div class="md:max-w-[579px] xs:w-full"><p class="uppercase text-interview-grey-1 text-interactionNormal font-semibold pb-spacing7">Web Development</p><h1 class="font-[700] text-headingBanner2 pb-spacing20 text-black">React</h1><p class="text-greyscale1 text-interactionNormal leading-[22px] font-normal flex items-center gap-spacing6"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M8.09313 2.36439C8.46453 1.61186 9.53762 1.61185 9.90902 2.36439L11.6202 5.8317L15.4466 6.38771C16.2771 6.50838 16.6087 7.52895 16.0078 8.11472L13.239 10.8136L13.8926 14.6246C14.0345 15.4517 13.1663 16.0825 12.4235 15.6919L9.00108 13.8927L5.57864 15.6919C4.83584 16.0825 3.96769 15.4517 4.10955 14.6246L4.76318 10.8136L1.99437 8.11472C1.39343 7.52896 1.72504 6.50838 2.55551 6.38771L6.38191 5.8317L8.09313 2.36439ZM9.00108 3.06669L7.36457 6.38262C7.21708 6.68146 6.932 6.88858 6.60222 6.9365L2.94286 7.46824L5.5908 10.0493C5.82943 10.2819 5.93832 10.6171 5.88199 10.9455L5.2569 14.5901L8.52992 12.8694C8.82489 12.7143 9.17727 12.7143 9.47224 12.8694L12.7453 14.5901L12.1202 10.9455C12.0638 10.6171 12.1727 10.2819 12.4114 10.0493L15.0593 7.46824L11.3999 6.9365C11.0702 6.88858 10.7851 6.68146 10.6376 6.38262L9.00108 3.06669Z" fill="#FF9F1F"></path></svg>4.5 Rating<span class="bg-transparent"></span><i aria-hidden="true" class="icon-book-open text-yellow-main text-base"></i> 55 Questions<span class="bg-transparent"></span><i aria-hidden="true" class="icon-clock text-yellow-main text-base"></i> 30 mins read<span class="bg-transparent"></span><svg xmlns="http://www.w3.org/2000/svg" width="15" height="11" viewBox="0 0 15 11" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M3.24952 2.59291C2.23066 3.44326 1.51929 4.44071 1.16018 5.00933C1.11075 5.0876 1.09048 5.12047 1.0772 5.14603C1.0712 5.15757 1.06952 5.16207 1.06839 5.16646C1.06826 5.16749 1.06809 5.16902 1.06789 5.17105C1.0672 5.17843 1.06667 5.1885 1.06667 5.2C1.06667 5.2115 1.0672 5.22157 1.06789 5.22895C1.06809 5.23098 1.06826 5.23251 1.06839 5.23354C1.06952 5.23793 1.0712 5.24243 1.0772 5.25397C1.09048 5.27953 1.11075 5.3124 1.16018 5.39067C1.51929 5.95929 2.23066 6.95674 3.24952 7.80709C4.26712 8.6564 5.55933 9.33333 7.0961 9.33333C8.63288 9.33333 9.92509 8.6564 10.9427 7.80709C11.9615 6.95674 12.6729 5.95929 13.032 5.39067C13.0815 5.3124 13.1017 5.27953 13.115 5.25396C13.121 5.24246 13.1227 5.23796 13.1238 5.23358C13.1239 5.23255 13.1241 5.23101 13.1243 5.22895C13.125 5.22157 13.1255 5.2115 13.1255 5.2C13.1255 5.1885 13.125 5.17843 13.1243 5.17105C13.1241 5.16902 13.1239 5.16749 13.1238 5.16646C13.1227 5.16207 13.121 5.15757 13.115 5.14603C13.1017 5.12047 13.0815 5.0876 13.032 5.00933C12.6729 4.44071 11.9615 3.44325 10.9427 2.59291C9.92509 1.7436 8.63288 1.06667 7.0961 1.06667C5.55933 1.06667 4.26712 1.7436 3.24952 2.59291ZM2.56604 1.77398C3.70346 0.824679 5.22954 0 7.0961 0C8.96266 0 10.4887 0.824679 11.6262 1.77398C12.7623 2.72224 13.5427 3.8204 13.9339 4.43976C13.9388 4.44758 13.9438 4.45545 13.9489 4.4634C14.0278 4.58784 14.1182 4.73042 14.1644 4.9319C14.2015 5.0936 14.2015 5.3064 14.1644 5.4681C14.1182 5.66958 14.0278 5.81216 13.9489 5.9366C13.9438 5.94455 13.9388 5.95243 13.9339 5.96024C13.5427 6.5796 12.7623 7.67775 11.6262 8.62601C10.4887 9.57532 8.96266 10.4 7.0961 10.4C5.22954 10.4 3.70346 9.57532 2.56604 8.62601C1.42987 7.67775 0.649473 6.5796 0.258315 5.96024C0.253381 5.95243 0.248386 5.94455 0.243343 5.9366C0.164414 5.81216 0.0739778 5.66958 0.027797 5.4681C-0.00926565 5.3064 -0.00926565 5.0936 0.027797 4.9319C0.0739778 4.73042 0.164414 4.58784 0.243343 4.4634C0.248385 4.45545 0.253381 4.44757 0.258314 4.43976C0.649473 3.8204 1.42987 2.72225 2.56604 1.77398ZM7.0961 3.73333C6.28609 3.73333 5.62944 4.38998 5.62944 5.2C5.62944 6.01002 6.28609 6.66667 7.0961 6.66667C7.90612 6.66667 8.56277 6.01002 8.56277 5.2C8.56277 4.38998 7.90612 3.73333 7.0961 3.73333ZM4.56277 5.2C4.56277 3.80088 5.69698 2.66667 7.0961 2.66667C8.49522 2.66667 9.62944 3.80088 9.62944 5.2C9.62944 6.59912 8.49522 7.73333 7.0961 7.73333C5.69698 7.73333 4.56277 6.59912 4.56277 5.2Z" fill="#FF9F1F"></path></svg>276 Readers</p></div><div class="rounded-[12px] h-auto relative overflow-hidden self-auto"><img alt="Interview Detail Banner Image" fetchpriority="high" loading="eager" width="411" height="274" decoding="async"  class="object-cover rounded-[12px]" style="color:transparent" sizes="(min-width: 768px) 411px, 274px" srcSet="" src="https://images.unsplash.com/photo-1457305237443-44c3d5a30b89?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80"></div></div></div></div></div></section></div><div><section data-id="Interview_Detail_Page_Interviews_Section" id="Interview_Detail_Page_Interviews_Section" class="py-spacing44 sm:py-spacing48 xl:px-spacing80 sm:px-spacing112 px-0"><div class="px-spacing20 md:px-0 w-full 2xl:max-w-7xl mx-auto"><div class="row g-4"><div class="col-12 md:flex-col"><div class="flex flex-row relative gap-spacing80"><div class="md:min-w-[846px] xs:w-full"><h3 class="text-interview-black-1 font-[700] md:text-title2 xs:text-baseInterviewTitle pb-spacing10">Introduction</h3><div class="text-neutral7 font-normal md:text-bodyNormal xs:text-bannerPoints pb-spacing24"><p>React is an open-source JavaScript framework and library that is used to build an interactive user interface and web applications quicker with lesser code. React is a front-end JavaScript library capable of making API calls that deal with the data.

Be it a beginner or an intermediate or an experienced React professional, this guide will aid you in increasing your confidence and knowledge in React. The questions below are compiled by experts that will help you prepare for your React Interview. Alongside, it will also provide step-by-step explanations for each question which will help you understand the concepts in detail. With React interview questions by your side, you can be positive about your preparation and ace the upcoming interview.</p></div><div><section class="py-spacing44 sm:py-spacing48 xl:px-spacing80 sm:px-spacing112 px-0 bg-subdued md:bg-white !py-0 !px-0"><div class="px-spacing20 md:px-0 w-full 2xl:max-w-7xl mx-auto"><div class="row g-4"><div class="col-12 md:flex-col"><div class="flex items-center justify-center font-Inter"><div class="bg-subdued w-full md:p-spacing40 py-spacing40 rounded-custom20"><div class="flex justify-between items-center"><div class="items-center flex-1"><div class="max-w-133"><div class="text-3xl leading-9.75 font-bold text-mono-black mt-spacing6">React Interview Questions and Answers</div></div></div></div><div class=""><div><div class="relative flex w-fit items-center max-w-full customized-x-scrollbar gap-spacing12 md:gap-spacing24 rounded-xl bg-white p-spacing8 shadow-primaryDouble my-6 md:my-spacing40"><button class="z-1 rounded-lg px-spacing16 h-10 transition-all duration-300 ease-out flex items-center gap-spacing8 whitespace-nowrap font-semibold text-primary-900 bg-primary-100 delay-300"><h3 class="text-sm md:text-base first-letter:capitalize">Beginner</h3></button><button class="z-1 rounded-lg px-spacing16 h-10 transition-all duration-300 ease-out flex items-center gap-spacing8 whitespace-nowrap bg-transparent font-medium text-neutral-800 hover:text-primary-600"><h3 class="text-sm md:text-base first-letter:capitalize">Intermediate</h3></button><button class="z-1 rounded-lg px-spacing16 h-10 transition-all duration-300 ease-out flex items-center gap-spacing8 whitespace-nowrap bg-transparent font-medium text-neutral-800 hover:text-primary-600"><h3 class="text-sm md:text-base first-letter:capitalize">Advanced</h3></button><span class="absolute block h-10 rounded-lg bg-primary-100 transition-all duration-300" style="left:0;width:0;opacity:1"></span></div></div><div class=""><div><div class="text-xl text-neutral-800 mb-spacing20 font-bold">Beginner</div><div class="relative w-full"><div class="rounded-xl mb-spacing24 last:mb-0 outline duration-300 transition ease-in-out outline-primary-main outline-2 shadow-card hover:shadow-card visible"><div class="cursor-pointer items-center justify-between p-4 transition-all duration-500 undefined bg-white p-spacing16 pl-spacing24 flex gap-spacing8 rounded-t-xl"><div class="flex text-sm font-semibold items-center overflow-x-auto"><h3 class="text-neutral-800 font-bold text-sm leading-5.5 -indent-0 pl-5 overflow-hidden">1. What are Controlled Components in React?</h3></div><div class="md:w-5 md:h-5 w-6 h-6 ml-spacing8 flex items-center transition-all duration-300"><i class="icon-chevron-up-filled inline-block transition-transform duration-300 text-xl rotate-0 text-neutral-800"></i></div></div><div class="overflow-hidden p-0 transition-all duration-500 ease-in-out rounded-b-xl" style="max-height:0px"><div><div class="p-spacing24 bg-white border-t border-neutral-200 faq-editor-content last:rounded-b-xl"><p></p><p><span data-contrast="auto" lang="EN">Controlled components are React components that control their state via props. The state of the form elements is handled by React rather than the DOM.</span></p><p><span data-contrast="auto" lang="EN-US"><strong>Example:</strong></span></p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-t0053d8fp" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm"><span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; class ControlledComponent extends React.Component {</span><span data-ccp-props="{&quot;201341983&quot;:0,&quot;335559740&quot;:276}">&nbsp;</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; constructor(props) {</span><span data-ccp-props="{&quot;201341983&quot;:0,&quot;335559740&quot;:276}">&nbsp;</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; &nbsp; super(props);</span><span data-ccp-props="{&quot;201341983&quot;:0,&quot;335559740&quot;:276}">&nbsp;</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; &nbsp; &nbsp; this.state = { value: '' };</span><span data-ccp-props="{&quot;201341983&quot;:0,&quot;335559740&quot;:276}">&nbsp;</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; }</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; &nbsp; handleChange = (event) =&gt; {</span><span data-ccp-props="{&quot;201341983&quot;:0,&quot;335559740&quot;:276}">&nbsp;</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; &nbsp; &nbsp; this.setState({ value: event.target.value });</span><span data-ccp-props="{&quot;201341983&quot;:0,&quot;335559740&quot;:276}">&nbsp;</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; }</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; &nbsp; render() {</span><span data-ccp-props="{&quot;201341983&quot;:0,&quot;335559740&quot;:276}">&nbsp;</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; &nbsp; return (</span><span data-ccp-props="{&quot;201341983&quot;:0,&quot;335559740&quot;:276}">&nbsp;</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input&nbsp;</span><span data-ccp-props="{&quot;201341983&quot;:0,&quot;335559740&quot;:276}">&nbsp;</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="text"&nbsp;</span><span data-ccp-props="{&quot;201341983&quot;:0,&quot;335559740&quot;:276}">&nbsp;</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value={this.state.value}&nbsp;</span><span data-ccp-props="{&quot;201341983&quot;:0,&quot;335559740&quot;:276}">&nbsp;</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;onChange={this.handleChange}&nbsp;</span><span data-ccp-props="{&quot;201341983&quot;:0,&quot;335559740&quot;:276}">&nbsp;</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /&gt;</span><span data-ccp-props="{&quot;201341983&quot;:0,&quot;335559740&quot;:276}">&nbsp;</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; &nbsp; );</span><span data-ccp-props="{&quot;201341983&quot;:0,&quot;335559740&quot;:276}">&nbsp;</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; }</span><span data-ccp-props="{&quot;201341983&quot;:0,&quot;335559740&quot;:276}">&nbsp;</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; }</span><span data-ccp-props="{&quot;201341983&quot;:0,&quot;335559740&quot;:276}">&nbsp;</span></pre></div></div><p></p></div></div></div></div><div class="rounded-xl mb-spacing24 last:mb-0 outline duration-300 transition ease-in-out outline-1 outline-neutral-200 hover:outline-neutral-400 hover:shadow-neutralShadow visible"><div class="cursor-pointer items-center justify-between p-4 transition-all duration-500 undefined bg-white p-spacing16 pl-spacing24 flex gap-spacing8 rounded-xl"><div class="flex text-sm font-semibold items-center overflow-x-auto"><h3 class="text-neutral-800 font-bold text-sm leading-5.5 -indent-0 pl-5 overflow-hidden line-clamp-2">2. What are Uncontrolled Components in React?</h3></div><div class="md:w-5 md:h-5 w-6 h-6 ml-spacing8 flex items-center transition-all duration-300"><i class="icon-chevron-up-filled inline-block transition-transform duration-300 text-xl rotate-180 text-primary-main"></i></div></div><div class="overflow-hidden p-0 transition-all duration-500 ease-in-out rounded-b-xl" style="max-height:0px"><div><div class="p-spacing24 bg-white border-t border-neutral-200 faq-editor-content last:rounded-b-xl"><p></p><p><span data-contrast="auto" lang="EN-US">Uncontrolled components rely on the DOM to&nbsp;maintain&nbsp;their state. You can access the current value of the element using refs.</span><span data-ccp-props="{&quot;201341983&quot;:0,&quot;335559740&quot;:276}">&nbsp;</span></p><p><span data-contrast="auto" lang="EN-US"><strong>Example:</strong></span></p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-8gf8p4z1g" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm"><span data-contrast="auto" lang="EN-US">class UncontrolledComponent extends React.Component {</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; constructor(props) {</span><span data-ccp-props="{&quot;201341983&quot;:0,&quot;335559740&quot;:276}"></span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; &nbsp; super(props);</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; &nbsp; &nbsp; this.inputRef = React.createRef();</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; }</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; &nbsp; handleSubmit = (event) =&gt; {</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; &nbsp; &nbsp; event.preventDefault();</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; &nbsp; &nbsp; alert(this.inputRef.current.value);</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; }</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; &nbsp; render() {</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; &nbsp; return (</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;form onSubmit={this.handleSubmit}&gt;</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="text" ref={this.inputRef} /&gt;</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;button type="submit"&gt;Submit&lt;/button&gt;</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/form&gt;</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; &nbsp; );</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; }</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; }</span></pre></div></div><p></p></div></div></div></div><div class="rounded-xl mb-spacing24 last:mb-0 outline duration-300 transition ease-in-out outline-1 outline-neutral-200 hover:outline-neutral-400 hover:shadow-neutralShadow visible"><div class="cursor-pointer items-center justify-between p-4 transition-all duration-500 undefined bg-white p-spacing16 pl-spacing24 flex gap-spacing8 rounded-xl"><div class="flex text-sm font-semibold items-center overflow-x-auto"><h3 class="text-neutral-800 font-bold text-sm leading-5.5 -indent-0 pl-5 overflow-hidden line-clamp-2">3. What is the use of key in React and why is it important?</h3></div><div class="md:w-5 md:h-5 w-6 h-6 ml-spacing8 flex items-center transition-all duration-300"><i class="icon-chevron-up-filled inline-block transition-transform duration-300 text-xl rotate-180 text-primary-main"></i></div></div><div class="overflow-hidden p-0 transition-all duration-500 ease-in-out rounded-b-xl" style="max-height:0px"><div><div class="p-spacing24 bg-white border-t border-neutral-200 faq-editor-content last:rounded-b-xl"><p><span data-contrast="auto" lang="EN-US">Key is a special string attribute we need to include when creating lists of elements. Keys help React identify which items have changed, are added, or are removed.</span><span data-ccp-props="{&quot;201341983&quot;:0,&quot;335559740&quot;:276}">&nbsp;</span></p><p><span data-contrast="auto" lang="EN-US"><strong>Example:</strong></span></p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-i19c4oi1q" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm"><span data-contrast="auto" lang="EN-US">const listItems = items.map((item) =&gt;</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; &nbsp; &lt;li key={item.id}&gt;{item.name}&lt;/li&gt;</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; );</span></pre></div></div><p><span data-ccp-props="{&quot;201341983&quot;:0,&quot;335559740&quot;:276}">&nbsp;</span></p></div></div></div></div><div class="rounded-xl mb-spacing24 last:mb-0 outline duration-300 transition ease-in-out outline-1 outline-neutral-200 hover:outline-neutral-400 hover:shadow-neutralShadow visible"><div class="cursor-pointer items-center justify-between p-4 transition-all duration-500 undefined bg-white p-spacing16 pl-spacing24 flex gap-spacing8 rounded-xl"><div class="flex text-sm font-semibold items-center overflow-x-auto"><h3 class="text-neutral-800 font-bold text-sm leading-5.5 -indent-0 pl-5 overflow-hidden line-clamp-2">4. How do you handle forms in React?</h3></div><div class="md:w-5 md:h-5 w-6 h-6 ml-spacing8 flex items-center transition-all duration-300"><i class="icon-chevron-up-filled inline-block transition-transform duration-300 text-xl rotate-180 text-primary-main"></i></div></div><div class="overflow-hidden p-0 transition-all duration-500 ease-in-out rounded-b-xl" style="max-height:0px"><div><div class="p-spacing24 bg-white border-t border-neutral-200 faq-editor-content last:rounded-b-xl"><p></p><p><span data-contrast="auto" lang="EN">Forms in React can be handled by using controlled components where the component's state handles form data.</span><span data-ccp-props="{&quot;201341983&quot;:0,&quot;335559740&quot;:276}">&nbsp;</span></p><p><span data-contrast="auto" lang="EN-US"><strong>Example:</strong></span></p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-dbsxippm7" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm"><span data-contrast="auto" lang="EN-US">class MyForm extends React.Component {</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; constructor(props) {</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; &nbsp; super(props);</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; &nbsp; &nbsp; this.state = { name: '' };</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; }</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; &nbsp; handleChange = (event) =&gt; {</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; &nbsp; &nbsp; this.setState({ name: event.target.value });</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; }</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; &nbsp; handleSubmit = (event) =&gt; {</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;event.preventDefault();</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; &nbsp; &nbsp; alert('A name was submitted: ' + this.state.name);</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; }</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; &nbsp; render() {</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; &nbsp; return (</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;form&nbsp;onSubmit={this.handleSubmit}&gt;</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;label&gt;</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Name:</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="text" value={this.state.name}&nbsp;onChange={this.handleChange} /&gt;</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/label&gt;</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="submit" value="Submit" /&gt;</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/form&gt;</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; &nbsp; );</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; }</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; }</span></pre></div></div><p></p></div></div></div></div><div class="rounded-xl mb-spacing24 last:mb-0 outline duration-300 transition ease-in-out outline-1 outline-neutral-200 hover:outline-neutral-400 hover:shadow-neutralShadow visible"><div class="cursor-pointer items-center justify-between p-4 transition-all duration-500 undefined bg-white p-spacing16 pl-spacing24 flex gap-spacing8 rounded-xl"><div class="flex text-sm font-semibold items-center overflow-x-auto"><h3 class="text-neutral-800 font-bold text-sm leading-5.5 -indent-0 pl-5 overflow-hidden line-clamp-2">5. How do you conditionally r ender components in React? </h3></div><div class="md:w-5 md:h-5 w-6 h-6 ml-spacing8 flex items-center transition-all duration-300"><i class="icon-chevron-up-filled inline-block transition-transform duration-300 text-xl rotate-180 text-primary-main"></i></div></div><div class="overflow-hidden p-0 transition-all duration-500 ease-in-out rounded-b-xl" style="max-height:0px"><div><div class="p-spacing24 bg-white border-t border-neutral-200 faq-editor-content last:rounded-b-xl"><p></p><p><span data-contrast="auto" lang="EN-US">You can conditionally&nbsp;render&nbsp;components using JavaScript conditional statements like&nbsp;if,&nbsp;else, or ternary operators within JSX.</span><span data-ccp-props="{&quot;201341983&quot;:0,&quot;335559740&quot;:276}">&nbsp;</span></p><p><span data-contrast="auto" lang="EN-US"><strong>Example:</strong></span></p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-havhlptym" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm"><span data-contrast="auto" lang="EN-US">const MyComponent = ({ isLoggedIn }) =&gt; {</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; return (</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; &nbsp; &lt;div&gt;</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {isLoggedIn ? &lt;h1&gt;Welcome back!&lt;/h1&gt; : &lt;h1&gt;Please sign in.&lt;/h1&gt;}</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; );</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; }</span></pre></div></div><p></p></div></div></div></div><div class="rounded-xl mb-spacing24 last:mb-0 outline duration-300 transition ease-in-out outline-1 outline-neutral-200 hover:outline-neutral-400 hover:shadow-neutralShadow hidden"><div class="cursor-pointer items-center justify-between p-4 transition-all duration-500 undefined bg-white p-spacing16 pl-spacing24 flex gap-spacing8 rounded-xl"><div class="flex text-sm font-semibold items-center overflow-x-auto"><h3 class="text-neutral-800 font-bold text-sm leading-5.5 -indent-0 pl-5 overflow-hidden line-clamp-2">6. What is the purpose of 'shouldComponentUpdate' in React?</h3></div><div class="md:w-5 md:h-5 w-6 h-6 ml-spacing8 flex items-center transition-all duration-300"><i class="icon-chevron-up-filled inline-block transition-transform duration-300 text-xl rotate-180 text-primary-main"></i></div></div><div class="overflow-hidden p-0 transition-all duration-500 ease-in-out rounded-b-xl" style="max-height:0px"><div><div class="p-spacing24 bg-white border-t border-neutral-200 faq-editor-content last:rounded-b-xl"><p></p><p><span data-contrast="auto" lang="EN-US">shouldComponentUpdate&nbsp;was a common method used in class components to prevent unnecessary re-renders. However, in modern React development, functional components with hooks like&nbsp;React.memo&nbsp;and&nbsp;useCallback&nbsp;are preferred for&nbsp;optimizing&nbsp;performance.</span><span data-ccp-props="{&quot;201341983&quot;:0,&quot;335559740&quot;:276}">&nbsp;</span></p><p><span data-contrast="auto" lang="EN"><strong>Example:</strong></span></p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-2ljhz4wlh" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm"><span data-contrast="auto" lang="EN-US">import React, { memo } from 'react';</span>
<span data-contrast="auto" lang="EN-US">const&nbsp;MyComponent&nbsp;=&nbsp;memo(({ value&nbsp;}) =&gt; {</span>
<span data-contrast="auto" lang="EN">&nbsp; return &lt;div&gt;{value}&lt;/div&gt;;</span>
<span data-contrast="auto" lang="EN">});</span></pre></div></div><p></p></div></div></div></div><div class="rounded-xl mb-spacing24 last:mb-0 outline duration-300 transition ease-in-out outline-1 outline-neutral-200 hover:outline-neutral-400 hover:shadow-neutralShadow hidden"><div class="cursor-pointer items-center justify-between p-4 transition-all duration-500 undefined bg-white p-spacing16 pl-spacing24 flex gap-spacing8 rounded-xl"><div class="flex text-sm font-semibold items-center overflow-x-auto"><h3 class="text-neutral-800 font-bold text-sm leading-5.5 -indent-0 pl-5 overflow-hidden line-clamp-2">7. What is the significance of React.Fragment</h3></div><div class="md:w-5 md:h-5 w-6 h-6 ml-spacing8 flex items-center transition-all duration-300"><i class="icon-chevron-up-filled inline-block transition-transform duration-300 text-xl rotate-180 text-primary-main"></i></div></div><div class="overflow-hidden p-0 transition-all duration-500 ease-in-out rounded-b-xl" style="max-height:0px"><div><div class="p-spacing24 bg-white border-t border-neutral-200 faq-editor-content last:rounded-b-xl"><p></p><p><span data-contrast="auto" lang="EN-US">React.Fragment&nbsp;allows us to group multiple elements without adding extra nodes to the DOM.</span><span data-ccp-props="{&quot;201341983&quot;:0,&quot;335559740&quot;:276}">&nbsp;</span></p><p><span data-contrast="auto" lang="EN-US"><strong>Example:</strong></span></p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-cnoex1mkb" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm"><span data-contrast="auto" lang="EN-US">const MyComponent = () =&gt; {</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; return (</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; &nbsp; &nbsp; &lt;React.Fragment&gt;</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h1&gt;Title&lt;/h1&gt;</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p&gt;Description&lt;/p&gt;</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; &nbsp; &nbsp; &lt;/React.Fragment&gt;</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; );</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; }</span></pre></div></div><p></p></div></div></div></div><div class="rounded-xl mb-spacing24 last:mb-0 outline duration-300 transition ease-in-out outline-1 outline-neutral-200 hover:outline-neutral-400 hover:shadow-neutralShadow hidden"><div class="cursor-pointer items-center justify-between p-4 transition-all duration-500 undefined bg-white p-spacing16 pl-spacing24 flex gap-spacing8 rounded-xl"><div class="flex text-sm font-semibold items-center overflow-x-auto"><h3 class="text-neutral-800 font-bold text-sm leading-5.5 -indent-0 pl-5 overflow-hidden line-clamp-2">8. What are hooks in React?</h3></div><div class="md:w-5 md:h-5 w-6 h-6 ml-spacing8 flex items-center transition-all duration-300"><i class="icon-chevron-up-filled inline-block transition-transform duration-300 text-xl rotate-180 text-primary-main"></i></div></div><div class="overflow-hidden p-0 transition-all duration-500 ease-in-out rounded-b-xl" style="max-height:0px"><div><div class="p-spacing24 bg-white border-t border-neutral-200 faq-editor-content last:rounded-b-xl"><p></p><p><span data-contrast="auto" lang="EN-US">Hooks are functions that let you use state and other React features in functional components. Introduced in React 16.8, they&nbsp;provide&nbsp;a way to use state and lifecycle methods without writing classes, making the code more concise and easier to understand.</span><span data-ccp-props="{&quot;201341983&quot;:0,&quot;335559740&quot;:276}">&nbsp;</span></p><p><span data-contrast="auto" lang="EN"><strong>Example:</strong></span></p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-rzlsyhfcd" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm"><span data-contrast="auto" lang="EN-US">import React, { useState, useEffect } from 'react';</span>
<span data-contrast="auto" lang="EN-US">const&nbsp;MyComponent&nbsp;= () =&gt; {</span>
<span data-contrast="auto" lang="EN-US">&nbsp; const [count, setCount] = useState(0);</span>
<span data-contrast="auto" lang="EN-US">&nbsp; useEffect(() =&gt; {</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; document.title = You clicked ${count} times;</span>
<span data-contrast="auto" lang="EN">&nbsp; }, [count]);</span>
<span data-contrast="auto" lang="EN">&nbsp; return (</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &lt;div&gt;</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; &lt;p&gt;You clicked {count} times&lt;/p&gt;</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; &nbsp; &lt;button onClick={() =&gt; setCount(count + 1)}&gt;Click me&lt;/button&gt;</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &lt;/div&gt;</span><span data-ccp-props="{&quot;201341983&quot;:0,&quot;335559740&quot;:276}">&nbsp;</span>
<span data-contrast="auto" lang="EN">&nbsp; );</span>
<span data-contrast="auto" lang="EN">}</span></pre></div></div><p></p></div></div></div></div><div class="rounded-xl mb-spacing24 last:mb-0 outline duration-300 transition ease-in-out outline-1 outline-neutral-200 hover:outline-neutral-400 hover:shadow-neutralShadow hidden"><div class="cursor-pointer items-center justify-between p-4 transition-all duration-500 undefined bg-white p-spacing16 pl-spacing24 flex gap-spacing8 rounded-xl"><div class="flex text-sm font-semibold items-center overflow-x-auto"><h3 class="text-neutral-800 font-bold text-sm leading-5.5 -indent-0 pl-5 overflow-hidden line-clamp-2">9. Explain the useEffect hook.</h3></div><div class="md:w-5 md:h-5 w-6 h-6 ml-spacing8 flex items-center transition-all duration-300"><i class="icon-chevron-up-filled inline-block transition-transform duration-300 text-xl rotate-180 text-primary-main"></i></div></div><div class="overflow-hidden p-0 transition-all duration-500 ease-in-out rounded-b-xl" style="max-height:0px"><div><div class="p-spacing24 bg-white border-t border-neutral-200 faq-editor-content last:rounded-b-xl"><p></p><p><span data-contrast="auto" lang="EN-US">useEffect&nbsp;is a hook that lets us perform side effects in functional components. It can be used for tasks like data fetching, subscriptions, or manually changing the DOM.</span><span data-ccp-props="{&quot;201341983&quot;:0,&quot;335559740&quot;:276}">&nbsp;</span></p><p><span data-contrast="auto" lang="EN-US"><strong>Example:</strong></span></p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-ktwh5rvit" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm"><span data-contrast="auto" lang="EN-US">import React, { useState, useEffect } from 'react';</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; const MyComponent = () =&gt; {</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; &nbsp; const [count, setCount] = useState(0);</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; &nbsp; useEffect(() =&gt; {</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; &nbsp; &nbsp; document.title = You clicked ${count} times;</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; }, [count]); // Only re-run the effect if count changes</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; return (</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; &nbsp; &lt;div&gt;</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p&gt;You clicked {count} times&lt;/p&gt;</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;button onClick={() =&gt; setCount(count + 1)}&gt;Click me&lt;/button&gt;</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; );</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; }</span></pre></div></div><p></p></div></div></div></div><div class="rounded-xl mb-spacing24 last:mb-0 outline duration-300 transition ease-in-out outline-1 outline-neutral-200 hover:outline-neutral-400 hover:shadow-neutralShadow hidden"><div class="cursor-pointer items-center justify-between p-4 transition-all duration-500 undefined bg-white p-spacing16 pl-spacing24 flex gap-spacing8 rounded-xl"><div class="flex text-sm font-semibold items-center overflow-x-auto"><h3 class="text-neutral-800 font-bold text-sm leading-5.5 -indent-0 pl-5 overflow-hidden line-clamp-2">10. What is context in React and how do you use it?</h3></div><div class="md:w-5 md:h-5 w-6 h-6 ml-spacing8 flex items-center transition-all duration-300"><i class="icon-chevron-up-filled inline-block transition-transform duration-300 text-xl rotate-180 text-primary-main"></i></div></div><div class="overflow-hidden p-0 transition-all duration-500 ease-in-out rounded-b-xl" style="max-height:0px"><div><div class="p-spacing24 bg-white border-t border-neutral-200 faq-editor-content last:rounded-b-xl"><p></p><p><span data-contrast="auto" lang="EN-US">Context&nbsp;provides&nbsp;a way to pass data through the&nbsp;component&nbsp;tree without having to pass props down manually at every level. It is designed to share data that can be considered “global” for a tree of React components.</span></p><p><span data-contrast="auto" lang="EN-US"><strong>Example:</strong></span></p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-fpytjd6k0" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm"><span data-contrast="auto" lang="EN-US">const MyContext = React.createContext();</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; const MyProvider = ({ children }) =&gt; {</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; &nbsp; const [value, setValue] = useState('some value');</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; return (</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; &nbsp; &nbsp; &lt;MyContext.Provider value={{ value, setValue }}&gt;</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {children}</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; &nbsp; &nbsp; &lt;/MyContext.Provider&gt;</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; );</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; };</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; const MyComponent = () =&gt; {</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; &nbsp; const { value } = React.useContext(MyContext);</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; return &lt;div&gt;{value}&lt;/div&gt;;</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; };</span></pre></div></div><p></p></div></div></div></div><div class="rounded-xl mb-spacing24 last:mb-0 outline duration-300 transition ease-in-out outline-1 outline-neutral-200 hover:outline-neutral-400 hover:shadow-neutralShadow hidden"><div class="cursor-pointer items-center justify-between p-4 transition-all duration-500 undefined bg-white p-spacing16 pl-spacing24 flex gap-spacing8 rounded-xl"><div class="flex text-sm font-semibold items-center overflow-x-auto"><h3 class="text-neutral-800 font-bold text-sm leading-5.5 -indent-0 pl-5 overflow-hidden line-clamp-2">11. How do you optimize performance in a React application? </h3></div><div class="md:w-5 md:h-5 w-6 h-6 ml-spacing8 flex items-center transition-all duration-300"><i class="icon-chevron-up-filled inline-block transition-transform duration-300 text-xl rotate-180 text-primary-main"></i></div></div><div class="overflow-hidden p-0 transition-all duration-500 ease-in-out rounded-b-xl" style="max-height:0px"><div><div class="p-spacing24 bg-white border-t border-neutral-200 faq-editor-content last:rounded-b-xl"><p></p><p><span data-contrast="auto" lang="EN-US">Several techniques can be used to optimize performance in a React application, including:</span></p><ul><li class="CertTheme__listItem pt-spacing10"><span data-contrast="auto" lang="EN-US">Memoization&nbsp;using&nbsp;React.memo&nbsp;and&nbsp;useMemo.</span></li><li class="CertTheme__listItem pt-spacing10"><span data-contrast="auto" lang="EN-US">Avoiding unnecessary re-renders with&nbsp;shouldComponentUpdate&nbsp;or&nbsp;React.PureComponent.</span></li><li class="CertTheme__listItem pt-spacing10"><span data-contrast="auto" lang="EN">&nbsp;Using dynamic imports for code splitting.</span></li><li class="CertTheme__listItem pt-spacing10"><span data-contrast="auto" lang="EN-US">&nbsp;Optimizing dependency arrays in hooks like useEffect and useCallback.</span></li></ul><p><span data-contrast="auto" lang="EN-US"><strong>Example:</strong></span></p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-f6ang5i8w" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm"><span data-contrast="auto" lang="EN-US">import React, { memo } from 'react';</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; const MyComponent = memo(({ value }) =&gt; {</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; return &lt;div&gt;{value}&lt;/div&gt;;</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; });</span></pre></div></div><p></p></div></div></div></div><div class="rounded-xl mb-spacing24 last:mb-0 outline duration-300 transition ease-in-out outline-1 outline-neutral-200 hover:outline-neutral-400 hover:shadow-neutralShadow hidden"><div class="cursor-pointer items-center justify-between p-4 transition-all duration-500 undefined bg-white p-spacing16 pl-spacing24 flex gap-spacing8 rounded-xl"><div class="flex text-sm font-semibold items-center overflow-x-auto"><h3 class="text-neutral-800 font-bold text-sm leading-5.5 -indent-0 pl-5 overflow-hidden line-clamp-2">12. What is the significance of useMemo and useCallback hooks?</h3></div><div class="md:w-5 md:h-5 w-6 h-6 ml-spacing8 flex items-center transition-all duration-300"><i class="icon-chevron-up-filled inline-block transition-transform duration-300 text-xl rotate-180 text-primary-main"></i></div></div><div class="overflow-hidden p-0 transition-all duration-500 ease-in-out rounded-b-xl" style="max-height:0px"><div><div class="p-spacing24 bg-white border-t border-neutral-200 faq-editor-content last:rounded-b-xl"><p></p><p><span data-contrast="auto" lang="EN-US">useMemo&nbsp;and&nbsp;useCallback&nbsp;hooks help optimize performance by&nbsp;memoizing&nbsp;values and functions to prevent unnecessary re-computation.</span><span data-ccp-props="{&quot;201341983&quot;:0,&quot;335559740&quot;:276}">&nbsp;</span></p><p><span data-contrast="auto" lang="EN-US"><strong>Example:</strong></span></p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-9l4s522v8" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm"><span data-contrast="auto" lang="EN-US">import React, { useMemo, useCallback } from 'react';</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; const MyComponent = ({ value }) =&gt; {</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; &nbsp; const memoizedValue = useMemo(() =&gt; computeExpensiveValue(value), [value]);</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; &nbsp; const memoizedCallback = useCallback(() =&gt; {</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; &nbsp; &nbsp; doSomething(value);</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; }, [value]);</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; return (</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; &nbsp; &lt;div&gt;</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p&gt;{memoizedValue}&lt;/p&gt;</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;button onClick={memoizedCallback}&gt;Click me&lt;/button&gt;</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; );</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; };</span></pre></div></div><p></p></div></div></div></div><div class="rounded-xl mb-spacing24 last:mb-0 outline duration-300 transition ease-in-out outline-1 outline-neutral-200 hover:outline-neutral-400 hover:shadow-neutralShadow hidden"><div class="cursor-pointer items-center justify-between p-4 transition-all duration-500 undefined bg-white p-spacing16 pl-spacing24 flex gap-spacing8 rounded-xl"><div class="flex text-sm font-semibold items-center overflow-x-auto"><h3 class="text-neutral-800 font-bold text-sm leading-5.5 -indent-0 pl-5 overflow-hidden line-clamp-2">13. How do you fetch data in React using hooks?</h3></div><div class="md:w-5 md:h-5 w-6 h-6 ml-spacing8 flex items-center transition-all duration-300"><i class="icon-chevron-up-filled inline-block transition-transform duration-300 text-xl rotate-180 text-primary-main"></i></div></div><div class="overflow-hidden p-0 transition-all duration-500 ease-in-out rounded-b-xl" style="max-height:0px"><div><div class="p-spacing24 bg-white border-t border-neutral-200 faq-editor-content last:rounded-b-xl"><p></p><p><span data-contrast="auto" lang="EN-US">You can fetch data in React using the&nbsp;useEffect&nbsp;hook to perform side effects like data fetching.</span><span data-ccp-props="{&quot;201341983&quot;:0,&quot;335559740&quot;:276}">&nbsp;</span></p><p><span data-contrast="auto" lang="EN-US"><strong>Example:</strong></span></p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-jpjwp9lk2" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm"><span data-contrast="auto" lang="EN-US">import React, { useState, useEffect } from 'react';</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; const MyComponent = () =&gt; {</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; &nbsp; const [data, setData] = useState(null);</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; &nbsp; useEffect(() =&gt; {</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; &nbsp; fetch('https://api.example.com/data')</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .then(response =&gt; response.json())</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .then(data =&gt; setData(data));</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; }, []); // Empty dependency array means this effect runs once</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; return (</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; &nbsp; &lt;div&gt;</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {data ? &lt;pre&gt;{JSON.stringify(data, null, 2)}&lt;/pre&gt; : 'Loading...'}</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; );</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; };</span></pre></div></div><p></p></div></div></div></div><div class="rounded-xl mb-spacing24 last:mb-0 outline duration-300 transition ease-in-out outline-1 outline-neutral-200 hover:outline-neutral-400 hover:shadow-neutralShadow hidden"><div class="cursor-pointer items-center justify-between p-4 transition-all duration-500 undefined bg-white p-spacing16 pl-spacing24 flex gap-spacing8 rounded-xl"><div class="flex text-sm font-semibold items-center overflow-x-auto"><h3 class="text-neutral-800 font-bold text-sm leading-5.5 -indent-0 pl-5 overflow-hidden line-clamp-2">14. What is the difference between useState and useReducer?</h3></div><div class="md:w-5 md:h-5 w-6 h-6 ml-spacing8 flex items-center transition-all duration-300"><i class="icon-chevron-up-filled inline-block transition-transform duration-300 text-xl rotate-180 text-primary-main"></i></div></div><div class="overflow-hidden p-0 transition-all duration-500 ease-in-out rounded-b-xl" style="max-height:0px"><div><div class="p-spacing24 bg-white border-t border-neutral-200 faq-editor-content last:rounded-b-xl"><p></p><p><span data-contrast="auto" lang="EN-US">useState&nbsp;is a basic hook for adding state to functional components, while&nbsp;useReducer&nbsp;is better for managing complex state logic and multiple related state values.</span><span data-ccp-props="{&quot;201341983&quot;:0,&quot;335559740&quot;:276}">&nbsp;</span></p><p><span data-contrast="auto" lang="EN-US"><strong>Example:</strong></span></p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-6r7a37uz2" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm"><span data-contrast="auto" lang="EN-US">import React, { useState, useReducer } from 'react';</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; // Using useState</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; const [count, setCount] = useState(0);</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; // Using useReducer</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; const initialState = { count: 0 };</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; function reducer(state, action) {</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; &nbsp; switch (action.type) {</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; &nbsp; case 'increment':</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return { count: state.count + 1 };</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; &nbsp; case 'decrement':</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return { count: state.count - 1 };</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; &nbsp; default:</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; throw new Error();</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; }</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; }</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; const [state, dispatch] = useReducer(reducer, initialState);</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; // In ourr component</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; return (</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; &lt;div&gt;</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; &nbsp; &nbsp; &lt;p&gt;Count using useState: {count}&lt;/p&gt;</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; &nbsp; &nbsp; &lt;button onClick={() =&gt; setCount(count + 1)}&gt;Increment&lt;/button&gt;</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; &nbsp; &nbsp; &lt;p&gt;Count using useReducer: {state.count}&lt;/p&gt;</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; &nbsp; &nbsp; &lt;button onClick={() =&gt; dispatch({ type: 'increment' })}&gt;Increment&lt;/button&gt;</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; &lt;/div&gt;</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; );</span></pre></div></div><p></p></div></div></div></div><div class="rounded-xl mb-spacing24 last:mb-0 outline duration-300 transition ease-in-out outline-1 outline-neutral-200 hover:outline-neutral-400 hover:shadow-neutralShadow hidden"><div class="cursor-pointer items-center justify-between p-4 transition-all duration-500 undefined bg-white p-spacing16 pl-spacing24 flex gap-spacing8 rounded-xl"><div class="flex text-sm font-semibold items-center overflow-x-auto"><h3 class="text-neutral-800 font-bold text-sm leading-5.5 -indent-0 pl-5 overflow-hidden line-clamp-2">15. How do you handle side effects in functional components?</h3></div><div class="md:w-5 md:h-5 w-6 h-6 ml-spacing8 flex items-center transition-all duration-300"><i class="icon-chevron-up-filled inline-block transition-transform duration-300 text-xl rotate-180 text-primary-main"></i></div></div><div class="overflow-hidden p-0 transition-all duration-500 ease-in-out rounded-b-xl" style="max-height:0px"><div><div class="p-spacing24 bg-white border-t border-neutral-200 faq-editor-content last:rounded-b-xl"><p></p><p><span data-contrast="auto" lang="EN-US">Side effects in functional components can be handled using the&nbsp;useEffect&nbsp;hook.</span><span data-ccp-props="{&quot;201341983&quot;:0,&quot;335559740&quot;:276}">&nbsp;</span></p><p><span data-contrast="auto" lang="EN-US"><strong>Example:</strong></span></p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-mjai3z1ef" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm"><span data-contrast="auto" lang="EN-US">import React, { useEffect } from 'react';</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; const MyComponent = () =&gt; {</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; &nbsp; useEffect(() =&gt; {</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; &nbsp; &nbsp; console.log('Component did mount');</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; &nbsp; return () =&gt; {</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log('Component will unmount');</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; &nbsp; };</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; &nbsp; }, []); // Empty dependency array means this effect runs once</span>
<span data-contrast="auto" lang="EN-US">&nbsp; &nbsp; &nbsp; return &lt;div&gt;Check the console for logs.&lt;/div&gt;;</span>
<span data-contrast="auto" lang="EN">&nbsp; &nbsp; };</span></pre></div></div><p></p></div></div></div></div><div class="relative"><div class="mt-spacing20 z-10 relative text-center flex justify-center mt-0"><button class="flex items-center gap-x-spacing8 py-spacing4"><span class="text-sm underline font-semibold text-mono-black">View all questions</span><i class="icon-chevron-down-double text-xl leading-5 text-neutral-800"></i></button></div><div class="absolute bottom-0 block h-32 w-full bg-gradient-to-t from-subdued/100 from-30% md:from-40%"></div></div></div></div></div><div class="hidden"><div><div class="text-xl text-neutral-800 mb-spacing20 font-bold">Intermediate</div><div class="relative w-full"><div class="rounded-xl mb-spacing24 last:mb-0 outline duration-300 transition ease-in-out outline-primary-main outline-2 shadow-card hover:shadow-card visible"><div class="cursor-pointer items-center justify-between p-4 transition-all duration-500 undefined bg-white p-spacing16 pl-spacing24 flex gap-spacing8 rounded-t-xl"><div class="flex text-sm font-semibold items-center overflow-x-auto"><h3 class="text-neutral-800 font-bold text-sm leading-5.5 -indent-0 pl-5 overflow-hidden">1. What is React?</h3></div><div class="md:w-5 md:h-5 w-6 h-6 ml-spacing8 flex items-center transition-all duration-300"><i class="icon-chevron-up-filled inline-block transition-transform duration-300 text-xl rotate-0 text-neutral-800"></i></div></div><div class="overflow-hidden p-0 transition-all duration-500 ease-in-out rounded-b-xl" style="max-height:0px"><div><div class="p-spacing24 bg-white border-t border-neutral-200 faq-editor-content last:rounded-b-xl"><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>React or simply React is a frontend library created by Facebook. It is used in their products like Facebook, WhatsApp, and Instagram. It was initially maintained by Facebook but later it was made open source and now have an active developer community. Popular websites like Netflix, Airbnb, Yahoo! Mail, KhanAcademy, Dropbox and much more use React to build their UI.</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>React allow us to create reusable UI components. Suppose you have a website, which has the same header and footer in all pages. If you create it using normal HTML and JS, then you have to use the same HTML code for header and footer in all pages. But in React you can have the Header and Footer as a separate component and import it into different Pages.</span><br><br><span>Consider this React code for About Us page.</span></p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-pxpp9mqh9" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm"><span class="CertTheme__tokenAttr">import</span><span> React from ‘react’</span><span class="CertTheme__tokenPunctuation">;</span><br><span class="CertTheme__tokenAttr">import</span><span> Header from ‘</span><span class="CertTheme__tokenPunctuation">.</span><span class="CertTheme__tokenOperator">/</span><span>HeaderPage’</span><span class="CertTheme__tokenPunctuation">;</span><br><span class="CertTheme__tokenAttr">import</span><span> Footer from ‘</span><span class="CertTheme__tokenPunctuation">.</span><span class="CertTheme__tokenOperator">/</span><span>FooterPage’</span><span class="CertTheme__tokenPunctuation">;</span><br><span class="CertTheme__tokenAttr">const</span><span> </span><span>AboutPage</span><span> </span><span class="CertTheme__tokenOperator">=</span><span class="CertTheme__tokenPunctuation">(</span><span class="CertTheme__tokenPunctuation">)</span><span> </span><span class="CertTheme__tokenOperator">=&gt;</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span class="CertTheme__tokenAttr">return</span><span class="CertTheme__tokenPunctuation">(</span><br><span class="CertTheme__tokenOperator">&lt;</span><span>div</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp;</span><span class="CertTheme__tokenOperator">&lt;</span><span>Header </span><span class="CertTheme__tokenOperator">/</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp; </span><span class="CertTheme__tokenOperator">&lt;</span><span>h1</span><span class="CertTheme__tokenOperator">&gt;</span><span>About Us</span><span class="CertTheme__tokenOperator">&lt;</span><span class="CertTheme__tokenOperator">/</span><span>h1</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp; </span><span class="CertTheme__tokenOperator">&lt;</span><span>p</span><span class="CertTheme__tokenOperator">&gt;</span><span>We are a cool web development company</span><span class="CertTheme__tokenPunctuation">,</span><br><span>located </span><span class="CertTheme__tokenAttr">in</span><span> Silicon Valley</span><span class="CertTheme__tokenPunctuation">.</span><span class="CertTheme__tokenOperator">&lt;</span><span class="CertTheme__tokenOperator">/</span><span>p</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp;</span><span class="CertTheme__tokenOperator">&lt;</span><span>Footer </span><span class="CertTheme__tokenOperator">/</span><span class="CertTheme__tokenOperator">&gt;</span><br><span class="CertTheme__tokenOperator">&lt;</span><span class="CertTheme__tokenOperator">/</span><span>div</span><span class="CertTheme__tokenOperator">&gt;</span><br><span class="CertTheme__tokenPunctuation">)</span><br><span class="CertTheme__tokenPunctuation">}</span><span class="CertTheme__tokenPunctuation">;</span><br><span class="CertTheme__tokenAttr">export</span><span> </span><span class="CertTheme__tokenAttr">default</span><span> AboutPage</span><span class="CertTheme__tokenPunctuation">;</span></pre></div></div><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>Now, Consider this React code for Services</span><b><strong class="CertTheme__textBold"> </strong></b><span>page.</span></p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-4t88gmu9h" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm"><span class="CertTheme__tokenAttr">import</span><span> React from ‘react’</span><span class="CertTheme__tokenPunctuation">;</span><br><span class="CertTheme__tokenAttr">import</span><span> Header from ‘</span><span class="CertTheme__tokenPunctuation">.</span><span class="CertTheme__tokenOperator">/</span><span>HeaderPage’</span><span class="CertTheme__tokenPunctuation">;</span><br><span class="CertTheme__tokenAttr">import</span><span> Footer from ‘</span><span class="CertTheme__tokenPunctuation">.</span><span class="CertTheme__tokenOperator">/</span><span>FooterPage’</span><span class="CertTheme__tokenPunctuation">;</span><br><span class="CertTheme__tokenAttr">const</span><span> </span><span>ServicePage</span><span> </span><span class="CertTheme__tokenOperator">=</span><span class="CertTheme__tokenPunctuation">(</span><span class="CertTheme__tokenPunctuation">)</span><span> </span><span class="CertTheme__tokenOperator">=&gt;</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span class="CertTheme__tokenAttr">return</span><span class="CertTheme__tokenPunctuation">(</span><br><span class="CertTheme__tokenOperator">&lt;</span><span>div</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp;</span><span class="CertTheme__tokenOperator">&lt;</span><span>Header </span><span class="CertTheme__tokenOperator">/</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp; </span><span class="CertTheme__tokenOperator">&lt;</span><span>h1</span><span class="CertTheme__tokenOperator">&gt;</span><span>Services</span><span class="CertTheme__tokenOperator">&lt;</span><span class="CertTheme__tokenOperator">/</span><span>h1</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp; </span><span class="CertTheme__tokenOperator">&lt;</span><span>p</span><span class="CertTheme__tokenOperator">&gt;</span><span>We provide service </span><span class="CertTheme__tokenAttr">in</span><span> Web development</span><span class="CertTheme__tokenPunctuation">,</span><span> Mobile</span><br><span>development</span><span class="CertTheme__tokenPunctuation">,</span><span> </span><span class="CertTheme__tokenProperty">SEO</span><span> services</span><span class="CertTheme__tokenPunctuation">.</span><span class="CertTheme__tokenOperator">&lt;</span><span class="CertTheme__tokenOperator">/</span><span>p</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp;</span><span class="CertTheme__tokenOperator">&lt;</span><span>Footer </span><span class="CertTheme__tokenOperator">/</span><span class="CertTheme__tokenOperator">&gt;</span><br><span class="CertTheme__tokenOperator">&lt;</span><span class="CertTheme__tokenOperator">/</span><span>div</span><span class="CertTheme__tokenOperator">&gt;</span><br><span class="CertTheme__tokenPunctuation">)</span><br><span class="CertTheme__tokenPunctuation">}</span><span class="CertTheme__tokenPunctuation">;</span><br><span class="CertTheme__tokenAttr">export</span><span> </span><span class="CertTheme__tokenAttr">default</span><span> ServicePage</span><span class="CertTheme__tokenPunctuation">;</span></pre></div></div><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>Beside this React is also very fast which reduces the loading time of even complex web-apps. React achieves this speed because it doesn’t update the Real DOM directly but it updates the Virtual DOM.</span></p></div></div></div></div><div class="rounded-xl mb-spacing24 last:mb-0 outline duration-300 transition ease-in-out outline-1 outline-neutral-200 hover:outline-neutral-400 hover:shadow-neutralShadow visible"><div class="cursor-pointer items-center justify-between p-4 transition-all duration-500 undefined bg-white p-spacing16 pl-spacing24 flex gap-spacing8 rounded-xl"><div class="flex text-sm font-semibold items-center overflow-x-auto"><h3 class="text-neutral-800 font-bold text-sm leading-5.5 -indent-0 pl-5 overflow-hidden line-clamp-2">2. How to start a project in React?</h3></div><div class="md:w-5 md:h-5 w-6 h-6 ml-spacing8 flex items-center transition-all duration-300"><i class="icon-chevron-up-filled inline-block transition-transform duration-300 text-xl rotate-180 text-primary-main"></i></div></div><div class="overflow-hidden p-0 transition-all duration-500 ease-in-out rounded-b-xl" style="max-height:0px"><div><div class="p-spacing24 bg-white border-t border-neutral-200 faq-editor-content last:rounded-b-xl"><p>There are mainly two ways to start a project in React - First is to setup React with Webpack and Babel from Scratch. The second way is to use the user-friendly way provide by Facebook ie using create-react-app.</p><p>The create-react-app also under the hood uses babel and webpack to compile your React code to plain HTML, CSS, and JavaScript. So, we can set them manually in React. But it is a lengthy and complicated process.</p><p>On the other hand, create-react-app is a simple way to start with React and provided by Facebook. The way is a bit different for npm version 5.2 and up then for 5.1 and down.</p><p><img alt="Code" loading="lazy" width="100" height="100" decoding="async"  class="fr-fic fr-dib" style="color:transparent;width:100%;height:auto;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url(&quot;data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3C/filter%3E%3Cimage preserveAspectRatio='none' filter='url(%23b)' x='0' y='0' height='100%25' width='100%25' href='data:image/svg+xml;base64,CiAgPHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxkZWZzPgogICAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImciPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNjY2MiIG9mZnNldD0iMjAlIiAvPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNkZGQiIG9mZnNldD0iNTAlIiAvPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNlZWUiIG9mZnNldD0iNzAlIiAvPgogICAgICA8L2xpbmVhckdyYWRpZW50PgogICAgPC9kZWZzPgogICAgPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9IiNlZWUiIC8+CiAgICA8cmVjdCBpZD0iciIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjZykiIC8+CiAgICA8YW5pbWF0ZSB4bGluazpocmVmPSIjciIgYXR0cmlidXRlTmFtZT0ieCIgZnJvbT0iLTEwMCIgdG89IjEwMCIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiICAvPgogIDwvc3ZnPg=='/%3E%3C/svg%3E&quot;)" sizes="(min-width: 767px) 50vw, 100vw" srcSet="" src="https://images.unsplash.com/photo-1513258496099-48135e5d3c8f?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80"></p><p dir="ltr">We will look into the way to create a react app using rpm version 5.2+. So, first, go to your terminal to check your npm version.</p><p dir="ltr">As I have npm version 6.5, so will use npx create-react-app my-app to create the react app.<br>It will take some time to install all the dependencies from the internet. It will take 2-4 minutes.</p><p dir="ltr"><img alt="ReactJS Code" loading="lazy" width="100" height="100" decoding="async"  class="fr-fic fr-dib" style="color:transparent;width:100%;height:auto;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url(&quot;data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3C/filter%3E%3Cimage preserveAspectRatio='none' filter='url(%23b)' x='0' y='0' height='100%25' width='100%25' href='data:image/svg+xml;base64,CiAgPHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxkZWZzPgogICAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImciPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNjY2MiIG9mZnNldD0iMjAlIiAvPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNkZGQiIG9mZnNldD0iNTAlIiAvPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNlZWUiIG9mZnNldD0iNzAlIiAvPgogICAgICA8L2xpbmVhckdyYWRpZW50PgogICAgPC9kZWZzPgogICAgPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9IiNlZWUiIC8+CiAgICA8cmVjdCBpZD0iciIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjZykiIC8+CiAgICA8YW5pbWF0ZSB4bGluazpocmVmPSIjciIgYXR0cmlidXRlTmFtZT0ieCIgZnJvbT0iLTEwMCIgdG89IjEwMCIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiICAvPgogIDwvc3ZnPg=='/%3E%3C/svg%3E&quot;)" sizes="(min-width: 767px) 50vw, 100vw" srcSet="" src="https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80"></p><p dir="ltr"><img alt="ReactJS Code" loading="lazy" width="100" height="100" decoding="async"  class="fr-fic fr-dib" style="color:transparent;width:100%;height:auto;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url(&quot;data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3C/filter%3E%3Cimage preserveAspectRatio='none' filter='url(%23b)' x='0' y='0' height='100%25' width='100%25' href='data:image/svg+xml;base64,CiAgPHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxkZWZzPgogICAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImciPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNjY2MiIG9mZnNldD0iMjAlIiAvPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNkZGQiIG9mZnNldD0iNTAlIiAvPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNlZWUiIG9mZnNldD0iNzAlIiAvPgogICAgICA8L2xpbmVhckdyYWRpZW50PgogICAgPC9kZWZzPgogICAgPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9IiNlZWUiIC8+CiAgICA8cmVjdCBpZD0iciIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjZykiIC8+CiAgICA8YW5pbWF0ZSB4bGluazpocmVmPSIjciIgYXR0cmlidXRlTmFtZT0ieCIgZnJvbT0iLTEwMCIgdG89IjEwMCIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiICAvPgogIDwvc3ZnPg=='/%3E%3C/svg%3E&quot;)" sizes="(min-width: 767px) 50vw, 100vw" srcSet="" src="https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80"></p><p>It will show us the above message once the system is ready. Next we cd into the directory and run our local development environment by running npm start</p><p><br></p><p>If it compiled successfully, we will get the below in our terminal.</p><p>As instructed, we need to open any web browser and go to http://localhost:3000/ to see our React app.</p><p><img alt="ReactJS" loading="lazy" width="100" height="100" decoding="async"  class="fr-fic fr-dib" style="color:transparent;width:100%;height:auto;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url(&quot;data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3C/filter%3E%3Cimage preserveAspectRatio='none' filter='url(%23b)' x='0' y='0' height='100%25' width='100%25' href='data:image/svg+xml;base64,CiAgPHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxkZWZzPgogICAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImciPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNjY2MiIG9mZnNldD0iMjAlIiAvPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNkZGQiIG9mZnNldD0iNTAlIiAvPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNlZWUiIG9mZnNldD0iNzAlIiAvPgogICAgICA8L2xpbmVhckdyYWRpZW50PgogICAgPC9kZWZzPgogICAgPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9IiNlZWUiIC8+CiAgICA8cmVjdCBpZD0iciIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjZykiIC8+CiAgICA8YW5pbWF0ZSB4bGluazpocmVmPSIjciIgYXR0cmlidXRlTmFtZT0ieCIgZnJvbT0iLTEwMCIgdG89IjEwMCIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiICAvPgogIDwvc3ZnPg=='/%3E%3C/svg%3E&quot;)" sizes="(min-width: 767px) 50vw, 100vw" srcSet="" src="https://images.unsplash.com/photo-1499540633125-bd2b2f65a7e6?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80"></p><p>If you use npm 5.1 or earlier, you can't use npx. Instead, install create-react-app globally:</p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-oiyl4jplb" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm">npm install -g create-react-app
Now you can run:
create-react-app my-app</pre></div></div><p><img alt="project in React" loading="lazy" width="100" height="100" decoding="async"  class="fr-fic fr-dib" style="color:transparent;width:100%;height:auto;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url(&quot;data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3C/filter%3E%3Cimage preserveAspectRatio='none' filter='url(%23b)' x='0' y='0' height='100%25' width='100%25' href='data:image/svg+xml;base64,CiAgPHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxkZWZzPgogICAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImciPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNjY2MiIG9mZnNldD0iMjAlIiAvPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNkZGQiIG9mZnNldD0iNTAlIiAvPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNlZWUiIG9mZnNldD0iNzAlIiAvPgogICAgICA8L2xpbmVhckdyYWRpZW50PgogICAgPC9kZWZzPgogICAgPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9IiNlZWUiIC8+CiAgICA8cmVjdCBpZD0iciIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjZykiIC8+CiAgICA8YW5pbWF0ZSB4bGluazpocmVmPSIjciIgYXR0cmlidXRlTmFtZT0ieCIgZnJvbT0iLTEwMCIgdG89IjEwMCIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiICAvPgogIDwvc3ZnPg=='/%3E%3C/svg%3E&quot;)" sizes="(min-width: 767px) 50vw, 100vw" srcSet="" src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80"></p></div></div></div></div><div class="rounded-xl mb-spacing24 last:mb-0 outline duration-300 transition ease-in-out outline-1 outline-neutral-200 hover:outline-neutral-400 hover:shadow-neutralShadow visible"><div class="cursor-pointer items-center justify-between p-4 transition-all duration-500 undefined bg-white p-spacing16 pl-spacing24 flex gap-spacing8 rounded-xl"><div class="flex text-sm font-semibold items-center overflow-x-auto"><h3 class="text-neutral-800 font-bold text-sm leading-5.5 -indent-0 pl-5 overflow-hidden line-clamp-2">3. What is MVC and where does React stand in it?</h3></div><div class="md:w-5 md:h-5 w-6 h-6 ml-spacing8 flex items-center transition-all duration-300"><i class="icon-chevron-up-filled inline-block transition-transform duration-300 text-xl rotate-180 text-primary-main"></i></div></div><div class="overflow-hidden p-0 transition-all duration-500 ease-in-out rounded-b-xl" style="max-height:0px"><div><div class="p-spacing24 bg-white border-t border-neutral-200 faq-editor-content last:rounded-b-xl"><p><span data-contrast="none" lang="EN-US"><strong><em>A common question in Reactjs interview questions, don't miss this one.</em></strong></span><em><strong><span data-ccp-props="{&quot;201341983&quot;:0,&quot;335559739&quot;:160,&quot;335559740&quot;:259}">&nbsp;</span>&nbsp;</strong></em></p><p>MVC or Model-View-Controller is a software design pattern mainly used in Web development for creating complex web-apps. &nbsp;This architecture comes from the traditional flow of web-application:</p><ul><li class="CertTheme__listItem pt-spacing10"><strong>View:</strong> Displays visualisation of data to the user. It is mainly the UI which the user interacts with.</li><li class="CertTheme__listItem pt-spacing10"><strong>Controller:</strong> It processes server-side logic and is a middleware between View and Model.</li><li class="CertTheme__listItem pt-spacing10"><strong>Model:&nbsp;</strong>It mainly processes data from or to the database. It is only connected to the database.</li></ul><p>Now, React is considered as the View layer in the MVC model, as it is mainly used to create the UI.<br>To use Controller and Model logic in React, we use third party libraries like flux and Redux with it.</p></div></div></div></div><div class="rounded-xl mb-spacing24 last:mb-0 outline duration-300 transition ease-in-out outline-1 outline-neutral-200 hover:outline-neutral-400 hover:shadow-neutralShadow visible"><div class="cursor-pointer items-center justify-between p-4 transition-all duration-500 undefined bg-white p-spacing16 pl-spacing24 flex gap-spacing8 rounded-xl"><div class="flex text-sm font-semibold items-center overflow-x-auto"><h3 class="text-neutral-800 font-bold text-sm leading-5.5 -indent-0 pl-5 overflow-hidden line-clamp-2">4. What are the main differences between Angular and React?</h3></div><div class="md:w-5 md:h-5 w-6 h-6 ml-spacing8 flex items-center transition-all duration-300"><i class="icon-chevron-up-filled inline-block transition-transform duration-300 text-xl rotate-180 text-primary-main"></i></div></div><div class="overflow-hidden p-0 transition-all duration-500 ease-in-out rounded-b-xl" style="max-height:0px"><div><div class="p-spacing24 bg-white border-t border-neutral-200 faq-editor-content last:rounded-b-xl"><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><i><b><strong class="CertTheme__textBold CertTheme__textItalic">One of the most frequently posed interview questions on React, be ready for it.</strong></b></i></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>Both </span><i><em class="CertTheme__textItalic">Angular </em></i><span>and </span><i><em class="CertTheme__textItalic">React </em></i><span>are popular JavaScript Framework/Library used worldwide to create complex web-apps.</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>Angular is different then AngularJS, which was released in 2009 and uses JavaScript. Angular released in 2016 by Google, was a complete rewrite of AngularJS and is not backward compatible. It uses TypeScript instead of JavaScript as the programming language. TypeScript is a statically typed language, which is considered as the superset of JavaScript. TypeScript provides developers with Object-oriented background a smooth transition to JavaScript.</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>React is a JavaScript library released by Facebook in 2013. It was initially developed at Facebook to optimise the ease of development of Component and to speed up Facebook.</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>Let’s now look at the differences between Angular and React -</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>Angular is a complete framework, whereas React is a library. React is very lightweight and we generally use other third-party libraries to enhance its capabilities when required. On the other hand, you get everything inside the Angular ecosystem only, but sometimes its an overkill.</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>Angular uses two-way data-binding, whereas React uses one-way data-binding. In React the data flows from parent component to child component only. Sometimes this complicates thing and to solve it we use state management packages like Redux and Flux with it.</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>Angular comes with complete MVC(Model-View-Controller), whereas React is just the View layer in MVC. In Angular, we write our TypeScript and HTML in different files and it separates the logic. Whereas in React, we use a hybrid language called JSX, which is basically writing JavaScript inside HTML code.</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>React is faster than Angular because it updates the Virtual DOM, whereas Angular updates directly the Real DOM. React only updates the part of DOM which gets updated by the code and behind the scene updates the Real DOM, when its efficient, Angular directly updates Real DOM, like a typical vanilla HTML, JS application. This has a huge impact in complex web-applications which have many complex features and it gives the advantage to React.</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>React is much easier to learn for a beginner as it’s a library with some basic concept. In comparison, Angular learning curve is more as you have to learn a complete Framework and have many unique concepts. But once you need to implement things like Redux, react-router to React, the complexity grows.</span></p></div></div></div></div><div class="rounded-xl mb-spacing24 last:mb-0 outline duration-300 transition ease-in-out outline-1 outline-neutral-200 hover:outline-neutral-400 hover:shadow-neutralShadow visible"><div class="cursor-pointer items-center justify-between p-4 transition-all duration-500 undefined bg-white p-spacing16 pl-spacing24 flex gap-spacing8 rounded-xl"><div class="flex text-sm font-semibold items-center overflow-x-auto"><h3 class="text-neutral-800 font-bold text-sm leading-5.5 -indent-0 pl-5 overflow-hidden line-clamp-2">5. Explain JSX in React?</h3></div><div class="md:w-5 md:h-5 w-6 h-6 ml-spacing8 flex items-center transition-all duration-300"><i class="icon-chevron-up-filled inline-block transition-transform duration-300 text-xl rotate-180 text-primary-main"></i></div></div><div class="overflow-hidden p-0 transition-all duration-500 ease-in-out rounded-b-xl" style="max-height:0px"><div><div class="p-spacing24 bg-white border-t border-neutral-200 faq-editor-content last:rounded-b-xl"><p>JSX is used in React to write code instead of regular JavaScript. It is similar to JavaScript but actually an extension to it. JSX Allows us to include ‘HTML’ in the same file along with ‘JavaScript’ (HTML+JS=JSX).</p><p>JSX looks like regular HTML and we have used it in Question 1.</p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-ipe3x8pup" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm">import React from ‘react’;
import Header from ‘./HeaderPage’;
import Footer from ‘./FooterPage’;
const AboutPage =() =&gt; {
return(
&lt;div&gt;
&nbsp;&lt;Header /&gt;
&nbsp; &lt;h1&gt;About Us&lt;/h1&gt;
&nbsp; &lt;p&gt;We are a cool web development company,
located in Silicon Valley.&lt;/p&gt;
&nbsp;&lt;Footer /&gt;
&lt;/div&gt;
)
};
export default AboutPage;</pre></div></div><p>In the above example inside the return statement, we are using JSX. Notice, the &lt;div&gt; is used to wrap the whole HTML code. It is required or else compiler will throw an error.</p><p>JavaScript expressions also can be used inside of JSX. We use it by wrapping them inside a set of curly brackets {}, as in below example.</p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-6aqyg8ood" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm">import React from ‘react’;
const DemoPage =() =&gt; {
return(
&lt;div&gt;
&nbsp; &lt;h1&gt;{1+1}&lt;/h1&gt;
&lt;/div&gt;
)
};
export default DemoPage;</pre></div></div><p><strong>Gives output - 2</strong></p><p>We cannot use if-else statement inside JSX, so we use ternary expressions if we need to check condition. In the below example, we took the App.js provided when we create a react app using create-react-app. Here we modified the code and used a ternary expression to check if <strong>i is 1</strong>, and then display an image or else display the link.</p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-hum4ane0p" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm">import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
&nbsp;render() {
&nbsp; &nbsp;var i =1;
&nbsp; &nbsp;return (
&nbsp; &nbsp; &nbsp;&lt;div className="App"&gt;
&nbsp; &nbsp; &nbsp; &nbsp;&lt;header className="App-header"&gt;
&nbsp; &nbsp; &nbsp; &nbsp;{ i === 1 ?
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;img src={logo} className="App-logo" alt="logo" /&gt; :
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;a href="https://reactjs.org" target="_blank"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Learn React
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/a&gt;
&nbsp; &nbsp; &nbsp; &nbsp;}
&nbsp; &nbsp; &nbsp; &nbsp;&lt;/header&gt;
&nbsp; &nbsp; &nbsp;&lt;/div&gt;
&nbsp; &nbsp;);
&nbsp;}
}
export default App;</pre></div></div><p><span style="color:rgb(0, 0, 0)"><strong>Gives output -</strong></span></p><p><img alt="JSX in React output" loading="lazy" width="100" height="100" decoding="async"  class="fr-fic fr-dib" style="color:transparent;width:100%;height:auto;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url(&quot;data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3C/filter%3E%3Cimage preserveAspectRatio='none' filter='url(%23b)' x='0' y='0' height='100%25' width='100%25' href='data:image/svg+xml;base64,CiAgPHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxkZWZzPgogICAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImciPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNjY2MiIG9mZnNldD0iMjAlIiAvPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNkZGQiIG9mZnNldD0iNTAlIiAvPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNlZWUiIG9mZnNldD0iNzAlIiAvPgogICAgICA8L2xpbmVhckdyYWRpZW50PgogICAgPC9kZWZzPgogICAgPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9IiNlZWUiIC8+CiAgICA8cmVjdCBpZD0iciIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjZykiIC8+CiAgICA8YW5pbWF0ZSB4bGluazpocmVmPSIjciIgYXR0cmlidXRlTmFtZT0ieCIgZnJvbT0iLTEwMCIgdG89IjEwMCIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiICAvPgogIDwvc3ZnPg=='/%3E%3C/svg%3E&quot;)" sizes="(min-width: 767px) 50vw, 100vw" srcSet="" src="https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80"></p></div></div></div></div><div class="rounded-xl mb-spacing24 last:mb-0 outline duration-300 transition ease-in-out outline-1 outline-neutral-200 hover:outline-neutral-400 hover:shadow-neutralShadow hidden"><div class="cursor-pointer items-center justify-between p-4 transition-all duration-500 undefined bg-white p-spacing16 pl-spacing24 flex gap-spacing8 rounded-xl"><div class="flex text-sm font-semibold items-center overflow-x-auto"><h3 class="text-neutral-800 font-bold text-sm leading-5.5 -indent-0 pl-5 overflow-hidden line-clamp-2">6. What are Components in React?</h3></div><div class="md:w-5 md:h-5 w-6 h-6 ml-spacing8 flex items-center transition-all duration-300"><i class="icon-chevron-up-filled inline-block transition-transform duration-300 text-xl rotate-180 text-primary-main"></i></div></div><div class="overflow-hidden p-0 transition-all duration-500 ease-in-out rounded-b-xl" style="max-height:0px"><div><div class="p-spacing24 bg-white border-t border-neutral-200 faq-editor-content last:rounded-b-xl"><p>Everything in React are referred as Components. We can have one giant component containing all our code, but React’s best practices are to divide our logic into smaller components and reuse them. Like we have a header component, footer component, Service Page Component, Home Page component and so on. There are actually two ways to create Components - Functional Components and Class Based components.</p><p>We have already seen examples of both types of Components. Below is an example of the functional component. As the name suggests, it is created using functions.</p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-3qvy0wu3l" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm">import React from ‘react’;
const DemoPage =() =&gt; {
return(
&lt;div&gt;
&nbsp; &lt;h1&gt;{1+1}&lt;/h1&gt;
&lt;/div&gt;
)
};
export default DemoPage;
Now we have seen Class-Based components also earlier.
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
&nbsp;render() {
&nbsp; &nbsp;var i =1;
&nbsp; &nbsp;return (
&nbsp; &nbsp; &nbsp;&lt;div className="App"&gt;
&nbsp; &nbsp; &nbsp; &nbsp;&lt;header className="App-header"&gt;
&nbsp; &nbsp; &nbsp; &nbsp;{ i === 1 ?
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;img src={logo} className="App-logo" alt="logo" /&gt; :
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;a href="https://reactjs.org" target="_blank"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Learn React
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/a&gt;
&nbsp; &nbsp; &nbsp; &nbsp;}
&nbsp; &nbsp; &nbsp; &nbsp;&lt;/header&gt;
&nbsp; &nbsp; &nbsp;&lt;/div&gt;
&nbsp; &nbsp;);
&nbsp;}
}
export default App;</pre></div></div><p>This is a simple class-based component. But most class-based components have the concept of state(which we will see later), which is not possible in Function based Components.</p></div></div></div></div><div class="rounded-xl mb-spacing24 last:mb-0 outline duration-300 transition ease-in-out outline-1 outline-neutral-200 hover:outline-neutral-400 hover:shadow-neutralShadow hidden"><div class="cursor-pointer items-center justify-between p-4 transition-all duration-500 undefined bg-white p-spacing16 pl-spacing24 flex gap-spacing8 rounded-xl"><div class="flex text-sm font-semibold items-center overflow-x-auto"><h3 class="text-neutral-800 font-bold text-sm leading-5.5 -indent-0 pl-5 overflow-hidden line-clamp-2">7. What are props in React?</h3></div><div class="md:w-5 md:h-5 w-6 h-6 ml-spacing8 flex items-center transition-all duration-300"><i class="icon-chevron-up-filled inline-block transition-transform duration-300 text-xl rotate-180 text-primary-main"></i></div></div><div class="overflow-hidden p-0 transition-all duration-500 ease-in-out rounded-b-xl" style="max-height:0px"><div><div class="p-spacing24 bg-white border-t border-neutral-200 faq-editor-content last:rounded-b-xl"><p class="CertTheme__paragraph" data-mode="standard"><br></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><i><b><strong class="CertTheme__textBold CertTheme__textItalic">A staple in React interview coding challenges, be prepared to answer this one.</strong></b></i></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>Props or properties are React ways of passing data from parent component to child component. Props can be passed to both Function based components or class-based components.</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>Consider this React code for About Page.</span></p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-cjeuhnfew" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm"><span class="CertTheme__tokenAttr">import</span><span> React from ‘react’</span><span class="CertTheme__tokenPunctuation">;</span><br><span class="CertTheme__tokenAttr">import</span><span> Header from ‘</span><span class="CertTheme__tokenPunctuation">.</span><span class="CertTheme__tokenOperator">/</span><span>HeaderPage’</span><span class="CertTheme__tokenPunctuation">;</span><br><span class="CertTheme__tokenAttr">import</span><span> Footer from ‘</span><span class="CertTheme__tokenPunctuation">.</span><span class="CertTheme__tokenOperator">/</span><span>FooterPage’</span><span class="CertTheme__tokenPunctuation">;</span><br><span class="CertTheme__tokenAttr">const</span><span> </span><span>AboutPage</span><span> </span><span class="CertTheme__tokenOperator">=</span><span class="CertTheme__tokenPunctuation">(</span><span class="CertTheme__tokenPunctuation">)</span><span> </span><span class="CertTheme__tokenOperator">=&gt;</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span class="CertTheme__tokenAttr">return</span><span class="CertTheme__tokenPunctuation">(</span><br><span class="CertTheme__tokenOperator">&lt;</span><span>div</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp;</span><span class="CertTheme__tokenOperator">&lt;</span><span>Header text</span><span class="CertTheme__tokenOperator">=</span><span>“Hero Company” subText</span><span class="CertTheme__tokenOperator">=</span><span>“Cool Company” </span><span class="CertTheme__tokenOperator">/</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp; </span><span class="CertTheme__tokenOperator">&lt;</span><span>h1</span><span class="CertTheme__tokenOperator">&gt;</span><span>About Us</span><span class="CertTheme__tokenOperator">&lt;</span><span class="CertTheme__tokenOperator">/</span><span>h1</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp; </span><span class="CertTheme__tokenOperator">&lt;</span><span>p</span><span class="CertTheme__tokenOperator">&gt;</span><span>We are a cool web development company</span><span class="CertTheme__tokenPunctuation">,</span><br><span>located </span><span class="CertTheme__tokenAttr">in</span><span> Silicon Valley</span><span class="CertTheme__tokenPunctuation">.</span><span class="CertTheme__tokenOperator">&lt;</span><span class="CertTheme__tokenOperator">/</span><span>p</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp;</span><span class="CertTheme__tokenOperator">&lt;</span><span>Footer </span><span class="CertTheme__tokenOperator">/</span><span class="CertTheme__tokenOperator">&gt;</span><br><span class="CertTheme__tokenOperator">&lt;</span><span class="CertTheme__tokenOperator">/</span><span>div</span><span class="CertTheme__tokenOperator">&gt;</span><br><span class="CertTheme__tokenPunctuation">)</span><br><span class="CertTheme__tokenPunctuation">}</span><span class="CertTheme__tokenPunctuation">;</span><br><span class="CertTheme__tokenAttr">export</span><span> </span><span class="CertTheme__tokenAttr">default</span><span> AboutPage</span><span class="CertTheme__tokenPunctuation">;</span></pre></div></div><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><b><strong class="CertTheme__textBold">Now the code for Header.</strong></b></p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-j3be0u32m" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm"><span class="CertTheme__tokenAttr">import</span><span> React from ‘react’</span><span class="CertTheme__tokenPunctuation">;</span><br><span class="CertTheme__tokenAttr">const</span><span> </span><span>Header</span><span> </span><span class="CertTheme__tokenOperator">=</span><span class="CertTheme__tokenPunctuation">(</span><span class="CertTheme__tokenPunctuation">)</span><span> </span><span class="CertTheme__tokenOperator">=&gt;</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span class="CertTheme__tokenAttr">return</span><span class="CertTheme__tokenPunctuation">(</span><br><span class="CertTheme__tokenOperator">&lt;</span><span>div</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp; </span><span class="CertTheme__tokenOperator">&lt;</span><span>h1</span><span class="CertTheme__tokenOperator">&gt;</span><span class="CertTheme__tokenPunctuation">{</span><span>props</span><span class="CertTheme__tokenPunctuation">.</span><span>text</span><span class="CertTheme__tokenPunctuation">}</span><span class="CertTheme__tokenOperator">&lt;</span><span class="CertTheme__tokenOperator">/</span><span>h1</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp; </span><span class="CertTheme__tokenOperator">&lt;</span><span>h2</span><span class="CertTheme__tokenOperator">&gt;</span><span class="CertTheme__tokenPunctuation">{</span><span>props</span><span class="CertTheme__tokenPunctuation">.</span><span>subText</span><span class="CertTheme__tokenPunctuation">}</span><span class="CertTheme__tokenOperator">&lt;</span><span class="CertTheme__tokenOperator">/</span><span>h2</span><span class="CertTheme__tokenOperator">&gt;</span><br><span class="CertTheme__tokenOperator">&lt;</span><span class="CertTheme__tokenOperator">/</span><span>div</span><span class="CertTheme__tokenOperator">&gt;</span><br><span class="CertTheme__tokenPunctuation">)</span><br><span class="CertTheme__tokenPunctuation">}</span><span class="CertTheme__tokenPunctuation">;</span></pre></div></div><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>export default Header;</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>In the above, we pass two props text</span><b><strong class="CertTheme__textBold"> </strong></b><span>and subText</span><b><strong class="CertTheme__textBold"> </strong></b><span>from Parent Component AboutPage to Child Component Header. We access the props in Child Component by the keyword props dot and the prop name. Notice, that we used the {} because props.text is a JavaScript statement and that is how we access JavaScript inside React.</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>There is a slightly different way to access props in class-based components. Here we access props in child components by this.props. Changing our Header Component to class-based component.</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>Consider this React code for About Page.</span></p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-mq6x2ob9x" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm"><span class="CertTheme__tokenAttr">import</span><span> React from ‘react’</span><span class="CertTheme__tokenPunctuation">;</span><br><span class="CertTheme__tokenAttr">import</span><span> Header from ‘</span><span class="CertTheme__tokenPunctuation">.</span><span class="CertTheme__tokenOperator">/</span><span>HeaderPage’</span><span class="CertTheme__tokenPunctuation">;</span><br><span class="CertTheme__tokenAttr">import</span><span> Footer from ‘</span><span class="CertTheme__tokenPunctuation">.</span><span class="CertTheme__tokenOperator">/</span><span>FooterPage’</span><span class="CertTheme__tokenPunctuation">;</span><br><span class="CertTheme__tokenAttr">const</span><span> </span><span>AboutPage</span><span> </span><span class="CertTheme__tokenOperator">=</span><span class="CertTheme__tokenPunctuation">(</span><span class="CertTheme__tokenPunctuation">)</span><span> </span><span class="CertTheme__tokenOperator">=&gt;</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span class="CertTheme__tokenAttr">return</span><span class="CertTheme__tokenPunctuation">(</span><br><span class="CertTheme__tokenOperator">&lt;</span><span>div</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp;</span><span class="CertTheme__tokenOperator">&lt;</span><span>Header text</span><span class="CertTheme__tokenOperator">=</span><span>“Hero Company” subText</span><span class="CertTheme__tokenOperator">=</span><span>“Cool Company” </span><span class="CertTheme__tokenOperator">/</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp; </span><span class="CertTheme__tokenOperator">&lt;</span><span>h1</span><span class="CertTheme__tokenOperator">&gt;</span><span>About Us</span><span class="CertTheme__tokenOperator">&lt;</span><span class="CertTheme__tokenOperator">/</span><span>h1</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp; </span><span class="CertTheme__tokenOperator">&lt;</span><span>p</span><span class="CertTheme__tokenOperator">&gt;</span><span>We are a cool web development company</span><span class="CertTheme__tokenPunctuation">,</span><br><span>located </span><span class="CertTheme__tokenAttr">in</span><span> Silicon Valley</span><span class="CertTheme__tokenPunctuation">.</span><span class="CertTheme__tokenOperator">&lt;</span><span class="CertTheme__tokenOperator">/</span><span>p</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp;</span><span class="CertTheme__tokenOperator">&lt;</span><span>Footer </span><span class="CertTheme__tokenOperator">/</span><span class="CertTheme__tokenOperator">&gt;</span><br><span class="CertTheme__tokenOperator">&lt;</span><span class="CertTheme__tokenOperator">/</span><span>div</span><span class="CertTheme__tokenOperator">&gt;</span><br><span class="CertTheme__tokenPunctuation">)</span><br><span class="CertTheme__tokenPunctuation">}</span><span class="CertTheme__tokenPunctuation">;</span><br><span class="CertTheme__tokenAttr">export</span><span> </span><span class="CertTheme__tokenAttr">default</span><span> AboutPage</span><span class="CertTheme__tokenPunctuation">;</span></pre></div></div><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><b><strong class="CertTheme__textBold">Now the code for Header.</strong></b></p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-4npmcrsyv" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm"><span class="CertTheme__tokenAttr">import</span><span> React</span><span class="CertTheme__tokenPunctuation">,</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><span> Component </span><span class="CertTheme__tokenPunctuation">}</span><span> from ‘react’</span><span class="CertTheme__tokenPunctuation">;</span><br><span class="CertTheme__tokenAttr">class</span><span> </span><span class="CertTheme__tokenFunction">Header</span><span> </span><span class="CertTheme__tokenAttr">extends</span><span> </span><span class="CertTheme__tokenFunction">Component</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span class="CertTheme__tokenFunction">render</span><span class="CertTheme__tokenPunctuation">(</span><span class="CertTheme__tokenPunctuation">)</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span class="CertTheme__tokenAttr">return</span><span class="CertTheme__tokenPunctuation">(</span><br><span class="CertTheme__tokenOperator">&lt;</span><span>div</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp; </span><span class="CertTheme__tokenOperator">&lt;</span><span>h1</span><span class="CertTheme__tokenOperator">&gt;</span><span class="CertTheme__tokenPunctuation">{</span><span class="CertTheme__tokenAttr">this</span><span class="CertTheme__tokenPunctuation">.</span><span>props</span><span class="CertTheme__tokenPunctuation">.</span><span>text</span><span class="CertTheme__tokenPunctuation">}</span><span class="CertTheme__tokenOperator">&lt;</span><span class="CertTheme__tokenOperator">/</span><span>h1</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp; </span><span class="CertTheme__tokenOperator">&lt;</span><span>h2</span><span class="CertTheme__tokenOperator">&gt;</span><span class="CertTheme__tokenPunctuation">{</span><span class="CertTheme__tokenAttr">this</span><span class="CertTheme__tokenPunctuation">.</span><span>props</span><span class="CertTheme__tokenPunctuation">.</span><span>subText</span><span class="CertTheme__tokenPunctuation">}</span><span class="CertTheme__tokenOperator">&lt;</span><span class="CertTheme__tokenOperator">/</span><span>h2</span><span class="CertTheme__tokenOperator">&gt;</span><br><span class="CertTheme__tokenOperator">&lt;</span><span class="CertTheme__tokenOperator">/</span><span>div</span><span class="CertTheme__tokenOperator">&gt;</span><br><span class="CertTheme__tokenPunctuation">)</span><br><span class="CertTheme__tokenPunctuation">}</span><br><span class="CertTheme__tokenAttr">export</span><span> </span><span class="CertTheme__tokenAttr">default</span><span> Header</span><span class="CertTheme__tokenPunctuation">;</span></pre></div></div><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><br></p></div></div></div></div><div class="rounded-xl mb-spacing24 last:mb-0 outline duration-300 transition ease-in-out outline-1 outline-neutral-200 hover:outline-neutral-400 hover:shadow-neutralShadow hidden"><div class="cursor-pointer items-center justify-between p-4 transition-all duration-500 undefined bg-white p-spacing16 pl-spacing24 flex gap-spacing8 rounded-xl"><div class="flex text-sm font-semibold items-center overflow-x-auto"><h3 class="text-neutral-800 font-bold text-sm leading-5.5 -indent-0 pl-5 overflow-hidden line-clamp-2">8. What is state in React?</h3></div><div class="md:w-5 md:h-5 w-6 h-6 ml-spacing8 flex items-center transition-all duration-300"><i class="icon-chevron-up-filled inline-block transition-transform duration-300 text-xl rotate-180 text-primary-main"></i></div></div><div class="overflow-hidden p-0 transition-all duration-500 ease-in-out rounded-b-xl" style="max-height:0px"><div><div class="p-spacing24 bg-white border-t border-neutral-200 faq-editor-content last:rounded-b-xl"><p><span data-contrast="none" lang="EN-US"><strong><em>This question is a regular feature in React questions, be ready to tackle it.</em></strong></span><em><strong><span data-ccp-props="{&quot;201341983&quot;:0,&quot;335559739&quot;:160,&quot;335559740&quot;:259}">&nbsp;</span>&nbsp;</strong></em></p><p>When we want to change the data inside a Component we use state. It is one of the most important and difficult concepts in React to understand.<br><br>We need to initialise the state first. After that, we need to change the state. Consider the updated code for App.js from our JSX example(Question 5)</p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-egk1oxtsb" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm">import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
&nbsp;constructor(){
&nbsp; &nbsp;super();
&nbsp; &nbsp;this.state = {
&nbsp; &nbsp; &nbsp;spinLogo: true
&nbsp; &nbsp;};
&nbsp; &nbsp;this.updateLogo = this.updateLogo.bind(this);
&nbsp;}
&nbsp;updateLogo() {
&nbsp; &nbsp;this.setState({
&nbsp; &nbsp; &nbsp;spinLogo: !this.state.spinLogo
&nbsp; &nbsp;});
&nbsp;}
&nbsp;render() {
&nbsp; &nbsp;return (
&nbsp; &nbsp; &nbsp;&lt;div className="App"&gt;
&nbsp; &nbsp; &nbsp; &nbsp;&lt;header className="App-header"&gt;
&nbsp; &nbsp; &nbsp; &nbsp;{ this.state.spinLogo === true ?
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;img src={logo} className="App-logo" alt="logo" /&gt; :
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;a href="https://reactjs.org" target="_blank"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Learn React
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/a&gt;
&nbsp; &nbsp; &nbsp; &nbsp;}
&nbsp; &nbsp; &nbsp; &nbsp;&lt;button onClick={this.updateLogo}&gt;Click me!&lt;/button&gt;
&nbsp; &nbsp; &nbsp; &nbsp;&lt;/header&gt;
&nbsp; &nbsp; &nbsp;&lt;/div&gt;
&nbsp; &nbsp;);
&nbsp;}
}
export default App;</pre></div></div><p><strong><span style="color:rgb(255, 255, 255)">Initializing State</span></strong><br>To initialize the state, simply set this.state in the constructor() method of the class. Our state is an object which in our case only has one key called spinLogo. Before we set the state, we have to call super() in the constructor. This is because this is uninitialized before super() has been called.</p><p>In our render method, we are checking the value of spinLogo by this.state.spinLogo. It is initially true, so the logo will be displayed.</p><p><img alt="initialise" loading="lazy" width="100" height="100" decoding="async"  class="fr-fic fr-dib" style="color:transparent;width:100%;height:auto;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url(&quot;data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3C/filter%3E%3Cimage preserveAspectRatio='none' filter='url(%23b)' x='0' y='0' height='100%25' width='100%25' href='data:image/svg+xml;base64,CiAgPHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxkZWZzPgogICAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImciPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNjY2MiIG9mZnNldD0iMjAlIiAvPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNkZGQiIG9mZnNldD0iNTAlIiAvPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNlZWUiIG9mZnNldD0iNzAlIiAvPgogICAgICA8L2xpbmVhckdyYWRpZW50PgogICAgPC9kZWZzPgogICAgPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9IiNlZWUiIC8+CiAgICA8cmVjdCBpZD0iciIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjZykiIC8+CiAgICA8YW5pbWF0ZSB4bGluazpocmVmPSIjciIgYXR0cmlidXRlTmFtZT0ieCIgZnJvbT0iLTEwMCIgdG89IjEwMCIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiICAvPgogIDwvc3ZnPg=='/%3E%3C/svg%3E&quot;)" sizes="(min-width: 767px) 50vw, 100vw" srcSet="" src="https://images.unsplash.com/photo-1523240795612-9a054b0db644?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80"></p><p>Now, we have a button which has an event listener onClick. When we click the button it runs the function updateLogo() and we change the state.</p><p><strong><span style="color:rgb(0, 0, 0)">Changing the state</span></strong></p><p>To modify the state, simply call this.setState()<strong>,</strong> passing in the new state object as the argument. We’ll do this inside a method which we’ll call updateLogo. &nbsp;So, here we change the value of updateLogo to the opposite of it. Initially, it was true, so we make it false.</p><p>One important concept in React is that whenever we call this.setState(), it re-renders the Component. So, this time when the ternary operator checks the value of this.state.spinLogo, it is false. So, it displays the link. Click the button again and it will show the logo.</p><p><img alt="Changing the state" loading="lazy" width="100" height="100" decoding="async"  class="fr-fic fr-dib" style="color:transparent;width:100%;height:auto;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url(&quot;data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3C/filter%3E%3Cimage preserveAspectRatio='none' filter='url(%23b)' x='0' y='0' height='100%25' width='100%25' href='data:image/svg+xml;base64,CiAgPHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxkZWZzPgogICAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImciPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNjY2MiIG9mZnNldD0iMjAlIiAvPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNkZGQiIG9mZnNldD0iNTAlIiAvPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNlZWUiIG9mZnNldD0iNzAlIiAvPgogICAgICA8L2xpbmVhckdyYWRpZW50PgogICAgPC9kZWZzPgogICAgPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9IiNlZWUiIC8+CiAgICA8cmVjdCBpZD0iciIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjZykiIC8+CiAgICA8YW5pbWF0ZSB4bGluazpocmVmPSIjciIgYXR0cmlidXRlTmFtZT0ieCIgZnJvbT0iLTEwMCIgdG89IjEwMCIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiICAvPgogIDwvc3ZnPg=='/%3E%3C/svg%3E&quot;)" sizes="(min-width: 767px) 50vw, 100vw" srcSet="" src="https://images.unsplash.com/photo-1515169061895-37fbb16acd37?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80"></p></div></div></div></div><div class="rounded-xl mb-spacing24 last:mb-0 outline duration-300 transition ease-in-out outline-1 outline-neutral-200 hover:outline-neutral-400 hover:shadow-neutralShadow hidden"><div class="cursor-pointer items-center justify-between p-4 transition-all duration-500 undefined bg-white p-spacing16 pl-spacing24 flex gap-spacing8 rounded-xl"><div class="flex text-sm font-semibold items-center overflow-x-auto"><h3 class="text-neutral-800 font-bold text-sm leading-5.5 -indent-0 pl-5 overflow-hidden line-clamp-2">9. Explain Virtual DOM in React?</h3></div><div class="md:w-5 md:h-5 w-6 h-6 ml-spacing8 flex items-center transition-all duration-300"><i class="icon-chevron-up-filled inline-block transition-transform duration-300 text-xl rotate-180 text-primary-main"></i></div></div><div class="overflow-hidden p-0 transition-all duration-500 ease-in-out rounded-b-xl" style="max-height:0px"><div><div class="p-spacing24 bg-white border-t border-neutral-200 faq-editor-content last:rounded-b-xl"><p>Sites built with vanilla JavaScript directly updates the Real DOM. It is fine for smaller websites, but as your website grows complex, it slows down the website. This happens because the browser engine has to traverse all nodes even if you update only one node.</p><p>Even Angular updates or work on Real DOM. ReactJS doesn’t update the Real DOM directly but has a concept of Virtual DOM. This causes a great performance benefit for ReactJS and so it’s faster than vanilla JavaScript apps and also Angular apps.</p><ul><li class="CertTheme__listItem pt-spacing10">Virtual DOM is actually an in-memory representation of Real DOM. It is a lightweight JavaScript Object which is a copy of Real DOM.</li><li class="CertTheme__listItem pt-spacing10">Whenever setState() method is called in your code, ReactJS creates the whole Virtual DOM from scratch.</li><li class="CertTheme__listItem pt-spacing10">At a given time, ReactJS maintains two virtual DOM, one with the updated state Virtual DOM and the other with the previous state Virtual DOM.</li><li class="CertTheme__listItem pt-spacing10">ReactJS uses a differential algorithm to compare both of the Virtual DOM to find the minimum number of steps to update the Real DOM.</li></ul><p>After that, it updates the Real DOM, whenever it’s best to update it.</p></div></div></div></div><div class="rounded-xl mb-spacing24 last:mb-0 outline duration-300 transition ease-in-out outline-1 outline-neutral-200 hover:outline-neutral-400 hover:shadow-neutralShadow hidden"><div class="cursor-pointer items-center justify-between p-4 transition-all duration-500 undefined bg-white p-spacing16 pl-spacing24 flex gap-spacing8 rounded-xl"><div class="flex text-sm font-semibold items-center overflow-x-auto"><h3 class="text-neutral-800 font-bold text-sm leading-5.5 -indent-0 pl-5 overflow-hidden line-clamp-2">10. How to use a library like jQuery in React, which interacts directly with DOM?</h3></div><div class="md:w-5 md:h-5 w-6 h-6 ml-spacing8 flex items-center transition-all duration-300"><i class="icon-chevron-up-filled inline-block transition-transform duration-300 text-xl rotate-180 text-primary-main"></i></div></div><div class="overflow-hidden p-0 transition-all duration-500 ease-in-out rounded-b-xl" style="max-height:0px"><div><div class="p-spacing24 bg-white border-t border-neutral-200 faq-editor-content last:rounded-b-xl"><p class="CertTheme__paragraph" data-mode="standard"><br></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>Using jQuery in React is not recommended as it directly interacts with the DOM and is generally a bad practice. We should always try first to find a React equivalent of the jQuery plugin or write the plugin ourselves. But many times there are plugins, which are only available in jQuery and no other alternative in ReactJS and also very time consuming to write ourselves. In such cases, we can use the method described below.</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>We attach a “ref” element to the root DOM element. Inside componentDidMount, we will get a reference to it, so that we can pass it to the jQuery plugin.</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>To prevent React from interacting with the DOM after mounting, we will return an empty </span><b><strong class="CertTheme__textBold">&lt;div /&gt;</strong></b><span> from our </span><b><strong class="CertTheme__textBold">render()</strong></b><span> method. The </span><b><strong class="CertTheme__textBold">&lt;div /&gt;</strong></b><span> element has nothing, so React will not update it, leaving the jQuery plugin to manage only that part of the DOM. Also, we will use componetWillUnmount() to unmount the jQuery plugin, after its work with DOM is done.</span></p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-wy95x193n" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm"><span class="CertTheme__tokenAttr">class</span><span> </span><span class="CertTheme__tokenFunction">anotherJqueryPlugin</span><span> </span><span class="CertTheme__tokenAttr">extends</span><span> </span><span class="CertTheme__tokenFunction">React</span><span class="CertTheme__tokenPunctuation">.</span><span class="CertTheme__tokenFunction">Component</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span>&nbsp;</span><span class="CertTheme__tokenFunction">componentDidMount</span><span class="CertTheme__tokenPunctuation">(</span><span class="CertTheme__tokenPunctuation">)</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span>&nbsp; &nbsp;</span><span class="CertTheme__tokenAttr">this</span><span class="CertTheme__tokenPunctuation">.</span><span>$el </span><span class="CertTheme__tokenOperator">=</span><span> </span><span class="CertTheme__tokenFunction">$</span><span class="CertTheme__tokenPunctuation">(</span><span class="CertTheme__tokenAttr">this</span><span class="CertTheme__tokenPunctuation">.</span><span>el</span><span class="CertTheme__tokenPunctuation">)</span><span class="CertTheme__tokenPunctuation">;</span><br><span>&nbsp; &nbsp;</span><span class="CertTheme__tokenAttr">this</span><span class="CertTheme__tokenPunctuation">.</span><span>$el</span><span class="CertTheme__tokenPunctuation">.</span><span class="CertTheme__tokenFunction">anotherJqueryPlugin</span><span class="CertTheme__tokenPunctuation">(</span><span class="CertTheme__tokenPunctuation">)</span><span class="CertTheme__tokenPunctuation">;</span><br><span>&nbsp;</span><span class="CertTheme__tokenPunctuation">}</span><br><span>&nbsp;</span><span class="CertTheme__tokenFunction">componentWillUnmount</span><span class="CertTheme__tokenPunctuation">(</span><span class="CertTheme__tokenPunctuation">)</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span>&nbsp; &nbsp;</span><span class="CertTheme__tokenAttr">this</span><span class="CertTheme__tokenPunctuation">.</span><span>$el</span><span class="CertTheme__tokenPunctuation">.</span><span class="CertTheme__tokenFunction">anotherJqueryPlugin</span><span class="CertTheme__tokenPunctuation">(</span><span class="CertTheme__tokenSelector">'destroy'</span><span class="CertTheme__tokenPunctuation">)</span><span class="CertTheme__tokenPunctuation">;</span><br><span>&nbsp;</span><span class="CertTheme__tokenPunctuation">}</span><br><span>&nbsp;</span><span class="CertTheme__tokenFunction">render</span><span class="CertTheme__tokenPunctuation">(</span><span class="CertTheme__tokenPunctuation">)</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span>&nbsp; &nbsp;</span><span class="CertTheme__tokenAttr">return</span><span> </span><span class="CertTheme__tokenOperator">&lt;</span><span>div ref</span><span class="CertTheme__tokenOperator">=</span><span class="CertTheme__tokenPunctuation">{</span><span>el</span><span> </span><span class="CertTheme__tokenOperator">=&gt;</span><span> </span><span class="CertTheme__tokenAttr">this</span><span class="CertTheme__tokenPunctuation">.</span><span>el </span><span class="CertTheme__tokenOperator">=</span><span> el</span><span class="CertTheme__tokenPunctuation">}</span><span> </span><span class="CertTheme__tokenOperator">/</span><span class="CertTheme__tokenOperator">&gt;</span><span class="CertTheme__tokenPunctuation">;</span><br><span>&nbsp;</span><span class="CertTheme__tokenPunctuation">}</span><br><span class="CertTheme__tokenPunctuation">}</span></pre></div></div><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><br></p></div></div></div></div><div class="rounded-xl mb-spacing24 last:mb-0 outline duration-300 transition ease-in-out outline-1 outline-neutral-200 hover:outline-neutral-400 hover:shadow-neutralShadow hidden"><div class="cursor-pointer items-center justify-between p-4 transition-all duration-500 undefined bg-white p-spacing16 pl-spacing24 flex gap-spacing8 rounded-xl"><div class="flex text-sm font-semibold items-center overflow-x-auto"><h3 class="text-neutral-800 font-bold text-sm leading-5.5 -indent-0 pl-5 overflow-hidden line-clamp-2">11. Explain 'refs'  in React?</h3></div><div class="md:w-5 md:h-5 w-6 h-6 ml-spacing8 flex items-center transition-all duration-300"><i class="icon-chevron-up-filled inline-block transition-transform duration-300 text-xl rotate-180 text-primary-main"></i></div></div><div class="overflow-hidden p-0 transition-all duration-500 ease-in-out rounded-b-xl" style="max-height:0px"><div><div class="p-spacing24 bg-white border-t border-neutral-200 faq-editor-content last:rounded-b-xl"><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>Refs are generally avoided in React and should be used with precautions. It is because they directly interact with the Real DOM and in React that is not desirable behaviour.</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>We can, however, use refs in the following situations.</span></p><ul class="CertTheme__ul"><li value="1" class="CertTheme__listItem pt-spacing10"><span>Interaction with third party libraries like jQuery.</span></li><li value="2" class="CertTheme__listItem pt-spacing10"><span>Doing animations</span></li><li value="3" class="CertTheme__listItem pt-spacing10"><span>Managing focus when we move to a text box</span></li></ul><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>There are many ways to use “refs” but we will see the way introduced in React 16.3 and that is by using </span><i><b><strong class="CertTheme__textBold CertTheme__textItalic">React.createRef()</strong></b></i></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>In the example for Ref, we have an input box. When we click on the submit button, we’ll read the value entered by the user and log it to the console. The same thing we could have achieved by using normal state and setState also.</span></p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-73cisqo94" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm"><span class="CertTheme__tokenAttr">class</span><span> </span><span class="CertTheme__tokenFunction">RefTextInputDemo</span><span> </span><span class="CertTheme__tokenAttr">extends</span><span> </span><span class="CertTheme__tokenFunction">React</span><span class="CertTheme__tokenPunctuation">.</span><span class="CertTheme__tokenFunction">Component</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span>&nbsp;</span><span class="CertTheme__tokenFunction">constructor</span><span class="CertTheme__tokenPunctuation">(</span><span>props</span><span class="CertTheme__tokenPunctuation">)</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span>&nbsp; &nbsp;</span><span class="CertTheme__tokenAttr">super</span><span class="CertTheme__tokenPunctuation">(</span><span>props</span><span class="CertTheme__tokenPunctuation">)</span><span class="CertTheme__tokenPunctuation">;</span><br><span>&nbsp; &nbsp;</span><span class="CertTheme__tokenComment">// create a ref to store the text Input element</span><br><span>&nbsp; &nbsp;</span><span class="CertTheme__tokenAttr">this</span><span class="CertTheme__tokenPunctuation">.</span><span>inputNewItem </span><span class="CertTheme__tokenOperator">=</span><span> React</span><span class="CertTheme__tokenPunctuation">.</span><span class="CertTheme__tokenFunction">createRef</span><span class="CertTheme__tokenPunctuation">(</span><span class="CertTheme__tokenPunctuation">)</span><span class="CertTheme__tokenPunctuation">;</span><br><span>&nbsp;</span><span class="CertTheme__tokenPunctuation">}</span><br><span>&nbsp;</span><span>handleClick</span><span> </span><span class="CertTheme__tokenOperator">=</span><span> </span><span>e</span><span> </span><span class="CertTheme__tokenOperator">=&gt;</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span>&nbsp; &nbsp;e</span><span class="CertTheme__tokenPunctuation">.</span><span class="CertTheme__tokenFunction">preventDefault</span><span class="CertTheme__tokenPunctuation">(</span><span class="CertTheme__tokenPunctuation">)</span><span class="CertTheme__tokenPunctuation">;</span><br><span>&nbsp; &nbsp;console</span><span class="CertTheme__tokenPunctuation">.</span><span class="CertTheme__tokenFunction">log</span><span class="CertTheme__tokenPunctuation">(</span><span class="CertTheme__tokenAttr">this</span><span class="CertTheme__tokenPunctuation">.</span><span>inputNewItem</span><span class="CertTheme__tokenPunctuation">.</span><span>current</span><span class="CertTheme__tokenPunctuation">.</span><span>value</span><span class="CertTheme__tokenPunctuation">)</span><span class="CertTheme__tokenPunctuation">;</span><br><span>&nbsp;</span><span class="CertTheme__tokenPunctuation">}</span><span class="CertTheme__tokenPunctuation">;</span><br><span>&nbsp;</span><span class="CertTheme__tokenFunction">render</span><span class="CertTheme__tokenPunctuation">(</span><span class="CertTheme__tokenPunctuation">)</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span>&nbsp; &nbsp; </span><span class="CertTheme__tokenComment">// tell React that we will associate the &lt;input&gt; ref</span><br><span>&nbsp; &nbsp; </span><span class="CertTheme__tokenComment">// with the `inputNewItem` that was created in the constructor</span><br><span>&nbsp; &nbsp;</span><span class="CertTheme__tokenAttr">return</span><span> </span><span class="CertTheme__tokenPunctuation">(</span><br><span>&nbsp; &nbsp; &nbsp;</span><span class="CertTheme__tokenOperator">&lt;</span><span>div</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="CertTheme__tokenOperator">&lt;</span><span>form onSubmit</span><span class="CertTheme__tokenOperator">=</span><span class="CertTheme__tokenPunctuation">{</span><span>e</span><span> </span><span class="CertTheme__tokenOperator">=&gt;</span><span> </span><span class="CertTheme__tokenAttr">this</span><span class="CertTheme__tokenPunctuation">.</span><span class="CertTheme__tokenFunction">handleClick</span><span class="CertTheme__tokenPunctuation">(</span><span>e</span><span class="CertTheme__tokenPunctuation">)</span><span class="CertTheme__tokenPunctuation">}</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="CertTheme__tokenOperator">&lt;</span><span>input type</span><span class="CertTheme__tokenOperator">=</span><span class="CertTheme__tokenSelector">"text"</span><span> ref</span><span class="CertTheme__tokenOperator">=</span><span class="CertTheme__tokenPunctuation">{</span><span class="CertTheme__tokenAttr">this</span><span class="CertTheme__tokenPunctuation">.</span><span>inputNewItem</span><span class="CertTheme__tokenPunctuation">}</span><span> </span><span class="CertTheme__tokenOperator">/</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="CertTheme__tokenOperator">&lt;</span><span>button</span><span class="CertTheme__tokenOperator">&gt;</span><span>Submit</span><span class="CertTheme__tokenOperator">&lt;</span><span class="CertTheme__tokenOperator">/</span><span>button</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="CertTheme__tokenOperator">&lt;</span><span class="CertTheme__tokenOperator">/</span><span>form</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp; &nbsp; &nbsp;</span><span class="CertTheme__tokenOperator">&lt;</span><span class="CertTheme__tokenOperator">/</span><span>div</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp; &nbsp;</span><span class="CertTheme__tokenPunctuation">)</span><span class="CertTheme__tokenPunctuation">;</span><br><span>&nbsp;</span><span class="CertTheme__tokenPunctuation">}</span><br><span class="CertTheme__tokenPunctuation">}</span></pre></div></div><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><img alt="refs in React" loading="lazy" width="100" height="100" decoding="async"  class="" style="color:transparent;width:100%;height:auto;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url(&quot;data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3C/filter%3E%3Cimage preserveAspectRatio='none' filter='url(%23b)' x='0' y='0' height='100%25' width='100%25' href='data:image/svg+xml;base64,CiAgPHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxkZWZzPgogICAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImciPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNjY2MiIG9mZnNldD0iMjAlIiAvPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNkZGQiIG9mZnNldD0iNTAlIiAvPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNlZWUiIG9mZnNldD0iNzAlIiAvPgogICAgICA8L2xpbmVhckdyYWRpZW50PgogICAgPC9kZWZzPgogICAgPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9IiNlZWUiIC8+CiAgICA8cmVjdCBpZD0iciIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjZykiIC8+CiAgICA8YW5pbWF0ZSB4bGluazpocmVmPSIjciIgYXR0cmlidXRlTmFtZT0ieCIgZnJvbT0iLTEwMCIgdG89IjEwMCIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiICAvPgogIDwvc3ZnPg=='/%3E%3C/svg%3E&quot;)" sizes="(min-width: 767px) 50vw, 100vw" srcSet="" src="https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80"></p></div></div></div></div><div class="rounded-xl mb-spacing24 last:mb-0 outline duration-300 transition ease-in-out outline-1 outline-neutral-200 hover:outline-neutral-400 hover:shadow-neutralShadow hidden"><div class="cursor-pointer items-center justify-between p-4 transition-all duration-500 undefined bg-white p-spacing16 pl-spacing24 flex gap-spacing8 rounded-xl"><div class="flex text-sm font-semibold items-center overflow-x-auto"><h3 class="text-neutral-800 font-bold text-sm leading-5.5 -indent-0 pl-5 overflow-hidden line-clamp-2">12. Explain the use of Webpack and Babel in React?</h3></div><div class="md:w-5 md:h-5 w-6 h-6 ml-spacing8 flex items-center transition-all duration-300"><i class="icon-chevron-up-filled inline-block transition-transform duration-300 text-xl rotate-180 text-primary-main"></i></div></div><div class="overflow-hidden p-0 transition-all duration-500 ease-in-out rounded-b-xl" style="max-height:0px"><div><div class="p-spacing24 bg-white border-t border-neutral-200 faq-editor-content last:rounded-b-xl"><p bis_size="{&quot;x&quot;:10,&quot;y&quot;:26,&quot;w&quot;:996,&quot;h&quot;:56,&quot;abs_x&quot;:311,&quot;abs_y&quot;:612}">Webpack and Babel<strong bis_size="{&quot;x&quot;:152,&quot;y&quot;:31,&quot;w&quot;:4,&quot;h&quot;:17,&quot;abs_x&quot;:453,&quot;abs_y&quot;:617}">&nbsp;</strong>are the tools which run in the background to turn our React project into vanilla HTML, CSS, and JavaScript. It is necessary because that only can be processed by the browser.</p><p bis_size="{&quot;x&quot;:10,&quot;y&quot;:98,&quot;w&quot;:996,&quot;h&quot;:28,&quot;abs_x&quot;:311,&quot;abs_y&quot;:684}">Webpack in basically a module builder. Webpack mainly runs during the development process.</p><p bis_size="{&quot;x&quot;:10,&quot;y&quot;:142,&quot;w&quot;:996,&quot;h&quot;:84,&quot;abs_x&quot;:311,&quot;abs_y&quot;:728}">We have taken the below diagram from <a bis_size="{&quot;x&quot;:292,&quot;y&quot;:147,&quot;w&quot;:159,&quot;h&quot;:17,&quot;abs_x&quot;:593,&quot;abs_y&quot;:733}" href="https://webpack.js.org/" rel="nofollow" target="_blank">https://webpack.js.org/</a> website. It is quite self-explanatory on what actually webpack does. As per the diagram, it takes your “js”, “sass” and other files and converts them to vanilla “js”, “css”, “jpg” and “png” files, which the web browser can understand.</p><p bis_size="{&quot;x&quot;:10,&quot;y&quot;:242,&quot;w&quot;:996,&quot;h&quot;:56,&quot;abs_x&quot;:311,&quot;abs_y&quot;:828}">Now, when we create our app with create-react-app, webpack is included in it by the Facebook team. If we are using something like SCSS in our project, it gets converted into vanilla CSS.</p><p bis_size="{&quot;x&quot;:10,&quot;y&quot;:314,&quot;w&quot;:996,&quot;h&quot;:270,&quot;abs_x&quot;:311,&quot;abs_y&quot;:900}"><img alt="bundle your scripts" loading="lazy" width="100" height="100" decoding="async"  class="fr-fic fr-dib" style="color:transparent;width:100%;height:auto;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url(&quot;data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3C/filter%3E%3Cimage preserveAspectRatio='none' filter='url(%23b)' x='0' y='0' height='100%25' width='100%25' href='data:image/svg+xml;base64,CiAgPHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxkZWZzPgogICAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImciPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNjY2MiIG9mZnNldD0iMjAlIiAvPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNkZGQiIG9mZnNldD0iNTAlIiAvPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNlZWUiIG9mZnNldD0iNzAlIiAvPgogICAgICA8L2xpbmVhckdyYWRpZW50PgogICAgPC9kZWZzPgogICAgPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9IiNlZWUiIC8+CiAgICA8cmVjdCBpZD0iciIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjZykiIC8+CiAgICA8YW5pbWF0ZSB4bGluazpocmVmPSIjciIgYXR0cmlidXRlTmFtZT0ieCIgZnJvbT0iLTEwMCIgdG89IjEwMCIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiICAvPgogIDwvc3ZnPg=='/%3E%3C/svg%3E&quot;)" sizes="(min-width: 767px) 50vw, 100vw" srcSet="" src="https://images.unsplash.com/photo-1517048676732-dce42f022dc7?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80"></p><p bis_size="{&quot;x&quot;:10,&quot;y&quot;:600,&quot;w&quot;:996,&quot;h&quot;:112,&quot;abs_x&quot;:311,&quot;abs_y&quot;:1186}">Babel, on the other hand, is a JavaScript compiler that converts latest JavaScript like ES6, ES7 &nbsp;into plain old ES5 JavaScript that most browsers understand (even the old ones- like IE8).<br bis_size="{&quot;x&quot;:367,&quot;y&quot;:633,&quot;w&quot;:0,&quot;h&quot;:17,&quot;abs_x&quot;:668,&quot;abs_y&quot;:1219}">In React land its main use is to transform our JSX code into vanilla JavaScript. As per the Babel website <a bis_size="{&quot;x&quot;:749,&quot;y&quot;:661,&quot;w&quot;:120,&quot;h&quot;:17,&quot;abs_x&quot;:1050,&quot;abs_y&quot;:1247}" href="https://babeljs.io/" rel="nofollow" target="_blank">https://babeljs.io/</a> , Here are the main use of Babel:</p><ul bis_size="{&quot;x&quot;:10,&quot;y&quot;:728,&quot;w&quot;:996,&quot;h&quot;:84,&quot;abs_x&quot;:311,&quot;abs_y&quot;:1314}"><li class="CertTheme__listItem pt-spacing10">Transform your syntax</li><li class="CertTheme__listItem pt-spacing10">Polyfill the features that are missing in the target environment.</li><li class="CertTheme__listItem pt-spacing10">Source code transformations (codemods)</li></ul><p bis_size="{&quot;x&quot;:10,&quot;y&quot;:828,&quot;w&quot;:996,&quot;h&quot;:28,&quot;abs_x&quot;:311,&quot;abs_y&quot;:1414}">A simple example of what Babel does for an arrow function, which we introduced in ES6.</p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-nknleioze" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm"><strong bis_size="{&quot;x&quot;:15,&quot;y&quot;:876,&quot;w&quot;:299,&quot;h&quot;:19,&quot;abs_x&quot;:316,&quot;abs_y&quot;:1462}">// Babel Input: ES6 arrow function</strong><br bis_size="{&quot;x&quot;:314,&quot;y&quot;:876,&quot;w&quot;:0,&quot;h&quot;:19,&quot;abs_x&quot;:615,&quot;abs_y&quot;:1462}">[5, 9, 7].map((i) =&gt; i + 1);<br bis_size="{&quot;x&quot;:261,&quot;y&quot;:904,&quot;w&quot;:0,&quot;h&quot;:19,&quot;abs_x&quot;:562,&quot;abs_y&quot;:1490}"><strong bis_size="{&quot;x&quot;:15,&quot;y&quot;:932,&quot;w&quot;:184,&quot;h&quot;:19,&quot;abs_x&quot;:316,&quot;abs_y&quot;:1518}">// Babel Output: ES5&nbsp;</strong><br bis_size="{&quot;x&quot;:199,&quot;y&quot;:932,&quot;w&quot;:0,&quot;h&quot;:19,&quot;abs_x&quot;:500,&quot;abs_y&quot;:1518}">[5, 9, 7].map(function(i) {<br bis_size="{&quot;x&quot;:252,&quot;y&quot;:960,&quot;w&quot;:0,&quot;h&quot;:19,&quot;abs_x&quot;:553,&quot;abs_y&quot;:1546}">&nbsp;return i + 1;<br bis_size="{&quot;x&quot;:138,&quot;y&quot;:988,&quot;w&quot;:0,&quot;h&quot;:19,&quot;abs_x&quot;:439,&quot;abs_y&quot;:1574}">});</pre></div></div><p bis_size="{&quot;x&quot;:10,&quot;y&quot;:1056,&quot;w&quot;:996,&quot;h&quot;:28,&quot;abs_x&quot;:311,&quot;abs_y&quot;:1642}">Below is how a simple React JSX line gets converted into the way it is actually used inside React with createElement.</p><p bis_size="{&quot;x&quot;:10,&quot;y&quot;:1100,&quot;w&quot;:996,&quot;h&quot;:412,&quot;abs_x&quot;:311,&quot;abs_y&quot;:1686}"><img alt="React JSX" loading="lazy" width="100" height="100" decoding="async"  class="fr-fic fr-dib" style="color:transparent;width:100%;height:auto;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url(&quot;data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3C/filter%3E%3Cimage preserveAspectRatio='none' filter='url(%23b)' x='0' y='0' height='100%25' width='100%25' href='data:image/svg+xml;base64,CiAgPHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxkZWZzPgogICAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImciPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNjY2MiIG9mZnNldD0iMjAlIiAvPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNkZGQiIG9mZnNldD0iNTAlIiAvPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNlZWUiIG9mZnNldD0iNzAlIiAvPgogICAgICA8L2xpbmVhckdyYWRpZW50PgogICAgPC9kZWZzPgogICAgPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9IiNlZWUiIC8+CiAgICA8cmVjdCBpZD0iciIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjZykiIC8+CiAgICA8YW5pbWF0ZSB4bGluazpocmVmPSIjciIgYXR0cmlidXRlTmFtZT0ieCIgZnJvbT0iLTEwMCIgdG89IjEwMCIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiICAvPgogIDwvc3ZnPg=='/%3E%3C/svg%3E&quot;)" sizes="(min-width: 767px) 50vw, 100vw" srcSet="" src="https://images.unsplash.com/photo-1523240795612-9a054b0db644?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80"></p></div></div></div></div><div class="rounded-xl mb-spacing24 last:mb-0 outline duration-300 transition ease-in-out outline-1 outline-neutral-200 hover:outline-neutral-400 hover:shadow-neutralShadow hidden"><div class="cursor-pointer items-center justify-between p-4 transition-all duration-500 undefined bg-white p-spacing16 pl-spacing24 flex gap-spacing8 rounded-xl"><div class="flex text-sm font-semibold items-center overflow-x-auto"><h3 class="text-neutral-800 font-bold text-sm leading-5.5 -indent-0 pl-5 overflow-hidden line-clamp-2">13. Explain Fragments in React 16?</h3></div><div class="md:w-5 md:h-5 w-6 h-6 ml-spacing8 flex items-center transition-all duration-300"><i class="icon-chevron-up-filled inline-block transition-transform duration-300 text-xl rotate-180 text-primary-main"></i></div></div><div class="overflow-hidden p-0 transition-all duration-500 ease-in-out rounded-b-xl" style="max-height:0px"><div><div class="p-spacing24 bg-white border-t border-neutral-200 faq-editor-content last:rounded-b-xl"><p></p><p><span data-contrast="none" lang="EN-US"><strong><em>This is a frequently asked question in React interview questions.</em></strong></span><em><strong><span data-ccp-props="{&quot;201341983&quot;:0,&quot;335559739&quot;:160,&quot;335559740&quot;:259}">&nbsp;</span>&nbsp;</strong></em></p><p>React Fragments is a much-needed feature introduced in &nbsp;React 16.2 that helps us to get rid of wrapper div, used inside components.</p><p>We will consider the below React code. Here we have a code for a simple Todo, which has an adjacent “h2” and a “ol” tag.</p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-cj587mhis" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm">render() {
&nbsp; &nbsp;return (
&nbsp; &nbsp; &nbsp; &nbsp;&lt;h2&gt;Todos:&lt;/h2&gt;
&nbsp; &nbsp; &nbsp; &nbsp;&lt;ol&gt;
&nbsp; &nbsp; &nbsp; &nbsp;{this.state.items.map(item =&gt; (
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;li key={item.id}&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;label&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;input type="checkbox" checked={item.done} /&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;span className={item.done ? "done" : ""}&gt;{item.text}&lt;/span&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/label&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/li&gt;
&nbsp; &nbsp; &nbsp; &nbsp;))}
&nbsp; &nbsp; &nbsp; &nbsp;&lt;/ol&gt;
&nbsp; &nbsp;)
&nbsp;}
}</pre></div></div><p>If we run the above code like this only, we will get the most common React error.</p><p><span style="color:rgb(0, 0, 0)"><strong>SyntaxError:</strong></span> Inline Babel script: Adjacent JSX elements must be wrapped in an enclosing tag (21:8) &nbsp; 19 | return ( &nbsp; 20 | &lt;h2&gt;Todos:&lt;/h2&gt; &gt; 21 | &lt;ol&gt; | ^ 22 | {this.state.items.map(item =&gt; ( &nbsp; 23 | &lt;li key={item.id}&gt; 24 | &lt;label&gt;</p><p>To fix this error, we will wrap everything inside a &lt;div&gt; tag.</p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-hwzvwthls" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm">render() {
&nbsp; &nbsp;return (
&nbsp; &nbsp;<strong>&lt;div&gt;</strong>
&nbsp; &nbsp; &nbsp; &nbsp;&lt;h2&gt;Todos:&lt;/h2&gt;
&nbsp; &nbsp; &nbsp; &nbsp;&lt;ol&gt;
&nbsp; &nbsp; &nbsp; &nbsp;{this.state.items.map(item =&gt; (
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;li key={item.id}&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;label&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;input type="checkbox" checked={item.done} /&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;span className={item.done ? "done" : ""}&gt;{item.text}&lt;/span&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/label&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/li&gt;
&nbsp; &nbsp; &nbsp; &nbsp;))}
&nbsp; &nbsp; &nbsp; &nbsp;&lt;/ol&gt;
&nbsp; &nbsp; &nbsp;<strong>&lt;/div&gt;</strong> &nbsp;
&nbsp; &nbsp;)
&nbsp;}</pre></div></div><p>Now, the unnecessary “div” creates a lot of problems. Suppose, we are using Flexbox in our parent component and this was a Child Component and the &lt;h2&gt; and &lt;ol&gt; were flex children. Now we introduce this &lt;div&gt; since in Flexbox it will be considered as a flex item, this will break our CSS style.</p><p>Now, we can use Fragments instead of &lt;div&gt; to get rid of the additional problem it caused. Fragment doesn’t have any special meaning to browser, so the problem of Flexbox item is solved.</p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-uv0heb72g" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm">render() {
&nbsp; &nbsp;return (
&nbsp; &nbsp;&lt;React.Fragment&gt;
&nbsp; &nbsp; &nbsp; &nbsp;&lt;h2&gt;Todos:&lt;/h2&gt;
&nbsp; &nbsp; &nbsp; &nbsp;&lt;ol&gt;
&nbsp; &nbsp; &nbsp; &nbsp;{this.state.items.map(item =&gt; (
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;li key={item.id}&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;label&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;input type="checkbox" checked={item.done} /&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;span className={item.done ? "done" : ""}&gt;{item.text}&lt;/span&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/label&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/li&gt;
&nbsp; &nbsp; &nbsp; &nbsp;))}
&nbsp; &nbsp; &nbsp; &nbsp;&lt;/ol&gt;
&nbsp; &nbsp; &nbsp;&lt;/React.Fragment&gt; &nbsp;
&nbsp; &nbsp;)
&nbsp;}</pre></div></div><p>We can also get rid of &nbsp;React.Fragment, if we import Fragment in the import statement.</p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-me6j2bh5f" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm">import React, { Component, Fragment } from 'react';
...
render() {
&nbsp; &nbsp;return (
&nbsp; &nbsp;&lt;Fragment&gt;
&nbsp; &nbsp; &nbsp; &nbsp;&lt;h2&gt;Todos:&lt;/h2&gt;
&nbsp; &nbsp; &nbsp; &nbsp;&lt;ol&gt;
&nbsp; &nbsp; &nbsp; &nbsp;{this.state.items.map(item =&gt; (
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;li key={item.id}&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;label&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;input type="checkbox" checked={item.done} /&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;span className={item.done ? "done" : ""}&gt;{item.text}&lt;/span&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/label&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/li&gt;
&nbsp; &nbsp; &nbsp; &nbsp;))}
&nbsp; &nbsp; &nbsp; &nbsp;&lt;/ol&gt;
&nbsp; &nbsp; &nbsp;&lt;/Fragment&gt; &nbsp;
&nbsp; &nbsp;)
&nbsp;}</pre></div></div><p></p></div></div></div></div><div class="rounded-xl mb-spacing24 last:mb-0 outline duration-300 transition ease-in-out outline-1 outline-neutral-200 hover:outline-neutral-400 hover:shadow-neutralShadow hidden"><div class="cursor-pointer items-center justify-between p-4 transition-all duration-500 undefined bg-white p-spacing16 pl-spacing24 flex gap-spacing8 rounded-xl"><div class="flex text-sm font-semibold items-center overflow-x-auto"><h3 class="text-neutral-800 font-bold text-sm leading-5.5 -indent-0 pl-5 overflow-hidden line-clamp-2">14. Explain type-checking with PropTypes in React?</h3></div><div class="md:w-5 md:h-5 w-6 h-6 ml-spacing8 flex items-center transition-all duration-300"><i class="icon-chevron-up-filled inline-block transition-transform duration-300 text-xl rotate-180 text-primary-main"></i></div></div><div class="overflow-hidden p-0 transition-all duration-500 ease-in-out rounded-b-xl" style="max-height:0px"><div><div class="p-spacing24 bg-white border-t border-neutral-200 faq-editor-content last:rounded-b-xl"><p></p><p>JavaScript is a loosely-bound language, which causes many errors in code. So, we should implement type-check, for different props been passed from Parent to Child component. Earlier it used to be a part of React library but since React v15.5, it has moved as a separate library. So, we need to npm install it and then import it by-</p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-cn206vjvt" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm">import PropTypes from ‘prop-types’;</pre></div></div><p>Let consider the below example for PropType.</p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-151e5d2bk" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm">import React from ‘react’;

class ReactProptypesDemo extends React.Component { &nbsp;
&nbsp;render() {
&nbsp; &nbsp;return (
&nbsp; &nbsp; &nbsp;&lt;div&gt;
&nbsp; &nbsp; &nbsp; &nbsp;&lt;TestForProptypes
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;str="Hriday"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;strOrNumber={10} &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;arr={[5,6,2]}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;arrOfObject={[{name: "Chinu", age: 36}, {name: "Shik", age: 35}]}
&nbsp; &nbsp; &nbsp; &nbsp;/&gt;
&nbsp; &nbsp; &nbsp;&lt;/div&gt;
&nbsp; &nbsp;)
&nbsp;}
}
const TestForProptypes = (props) =&gt; {
return (
&nbsp; &lt;React.Fragment&gt;
&nbsp; &nbsp; &nbsp; &nbsp;&lt;h3&gt;{props.str}&lt;/h3&gt;
&nbsp; &nbsp; &nbsp; &nbsp;&lt;h4&gt;{props.strOrNumber}&lt;/h4&gt;
&nbsp; &nbsp; &nbsp; &nbsp;&lt;div&gt;{props.arr.map(itm=&gt; &lt;li key={itm}&gt;{itm}&lt;/li&gt;)}&lt;/div&gt;
&nbsp; &nbsp; &nbsp; &nbsp;&lt;div&gt;{props.arrOfObject.map(itm=&gt; &lt;li key={itm.age}&gt;{itm.name}&lt;/li&gt;)}&lt;/div&gt;
&nbsp; &nbsp; &nbsp;&lt;/React.Fragment&gt;
&nbsp; &nbsp; &nbsp;);
}
TestForProptypes.propTypes = {
str: PropTypes.string,
&nbsp;strOrNumber: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
&nbsp;arr: PropTypes.arrayOf(PropTypes.number),
&nbsp;arrOfObject: PropTypes.arrayOf(PropTypes.shape(
&nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; name: PropTypes.string,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;age: PropTypes.number
&nbsp; &nbsp; &nbsp; &nbsp;}
&nbsp;))
}
ReactDOM.render(&lt;ReactProptypesDemo /&gt;, document.querySelector("#app"))

</pre></div></div><p>Here we have a parent component ReactProptypesDemo which is passing props to TestForProptypes. So, for each prop, we check whether it is the correct type or not.</p><p>In TestForProptypes.propTypes , we check for each prop.&nbsp;</p><p>Like for the “str” prop, we can check by -</p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-p9szv5dty" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm">str: PropTypes.string</pre></div></div><p>For the array prop “arr” we can check as -</p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-60sp7n6x4" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm">arr: PropTypes.arrayOf(PropTypes.number)</pre></div></div><p>For the array of object prop “arrOfObject” we can check as -</p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-tuldmhi24" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm">arrOfObject: PropTypes.arrayOf(PropTypes.shape(
&nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; name: PropTypes.string,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;age: PropTypes.number
&nbsp; &nbsp; &nbsp; &nbsp;}
&nbsp;))</pre></div></div><p><br></p><p>We have a check also for String or Number prop “strOrNumber” as below -</p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-btz3e56j6" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm">strOrNumber: PropTypes.oneOfType([PropTypes.string, PropTypes.number])</pre></div></div><p>if we pass “boolean” to it instead of string or number.</p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-md1wzrttf" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm">&lt;TestForProptypes
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;str="Nabendu"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;strOrNumber={true} &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;arr={[3,1,2]}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;arrOfObject={[{name: "Nabs", age: 36}, {name: "Shikha", age: 35}]}
&nbsp; &nbsp; &nbsp; &nbsp;/&gt;</pre></div></div><p>We will get the below error in console.</p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-q26h94toy" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm">Warning: Failed prop type: Invalid prop `strOrNumber` supplied to&nbsp;
`TestForProptypes`. &nbsp; &nbsp;&nbsp;
in TestForProptypes (created by ReactProptypesDemo) &nbsp; &nbsp;&nbsp;
in ReactProptypesDemo</pre></div></div><p></p></div></div></div></div><div class="rounded-xl mb-spacing24 last:mb-0 outline duration-300 transition ease-in-out outline-1 outline-neutral-200 hover:outline-neutral-400 hover:shadow-neutralShadow hidden"><div class="cursor-pointer items-center justify-between p-4 transition-all duration-500 undefined bg-white p-spacing16 pl-spacing24 flex gap-spacing8 rounded-xl"><div class="flex text-sm font-semibold items-center overflow-x-auto"><h3 class="text-neutral-800 font-bold text-sm leading-5.5 -indent-0 pl-5 overflow-hidden line-clamp-2">15. What is the difference between this.state.name="Thomas" and this.setState({name: "Thomas"}) ?</h3></div><div class="md:w-5 md:h-5 w-6 h-6 ml-spacing8 flex items-center transition-all duration-300"><i class="icon-chevron-up-filled inline-block transition-transform duration-300 text-xl rotate-180 text-primary-main"></i></div></div><div class="overflow-hidden p-0 transition-all duration-500 ease-in-out rounded-b-xl" style="max-height:0px"><div><div class="p-spacing24 bg-white border-t border-neutral-200 faq-editor-content last:rounded-b-xl"><p>First of all setting the state directly by <em>this.state.name=”Thomas”&nbsp;</em>is not recommended in React.<br>In React we should never mutate state directly instead of using setState to change the state.</p><p>One more drawback of setting state directly is that React’s lifecycle methods — shouldComponentUpdate(), componentWillUpdate(), componentDidUpdate() and render()- depend on state transitions being called with setState().</p></div></div></div></div><div class="rounded-xl mb-spacing24 last:mb-0 outline duration-300 transition ease-in-out outline-1 outline-neutral-200 hover:outline-neutral-400 hover:shadow-neutralShadow hidden"><div class="cursor-pointer items-center justify-between p-4 transition-all duration-500 undefined bg-white p-spacing16 pl-spacing24 flex gap-spacing8 rounded-xl"><div class="flex text-sm font-semibold items-center overflow-x-auto"><h3 class="text-neutral-800 font-bold text-sm leading-5.5 -indent-0 pl-5 overflow-hidden line-clamp-2">16. What are Pure Functions and how they are used in reducers?</h3></div><div class="md:w-5 md:h-5 w-6 h-6 ml-spacing8 flex items-center transition-all duration-300"><i class="icon-chevron-up-filled inline-block transition-transform duration-300 text-xl rotate-180 text-primary-main"></i></div></div><div class="overflow-hidden p-0 transition-all duration-500 ease-in-out rounded-b-xl" style="max-height:0px"><div><div class="p-spacing24 bg-white border-t border-neutral-200 faq-editor-content last:rounded-b-xl"><p class="CertTheme__paragraph" data-mode="standard"><br></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>A Pure function is a function which :</span><br><span>* Given the same input, will always return the same output.</span><br><span>* Produces no side effects.</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>Consider the below example:</span></p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-db5qp1e1n" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm"><span>Math</span><span class="CertTheme__tokenPunctuation">.</span><span class="CertTheme__tokenFunction">random</span><span class="CertTheme__tokenPunctuation">(</span><span class="CertTheme__tokenPunctuation">)</span><span class="CertTheme__tokenPunctuation">;</span><span> </span><span class="CertTheme__tokenComment">// =&gt; 0.4011148700956255</span><br><span>Math</span><span class="CertTheme__tokenPunctuation">.</span><span class="CertTheme__tokenFunction">random</span><span class="CertTheme__tokenPunctuation">(</span><span class="CertTheme__tokenPunctuation">)</span><span class="CertTheme__tokenPunctuation">;</span><span> </span><span class="CertTheme__tokenComment">// =&gt; 0.8533405303023756</span><br><span>Math</span><span class="CertTheme__tokenPunctuation">.</span><span class="CertTheme__tokenFunction">random</span><span class="CertTheme__tokenPunctuation">(</span><span class="CertTheme__tokenPunctuation">)</span><span class="CertTheme__tokenPunctuation">;</span><span> </span><span class="CertTheme__tokenComment">// =&gt; 0.3550692005082965</span></pre></div></div><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>Even though we didn’t pass any arguments into any of the function calls, they all produced different output, meaning that </span><i><em class="CertTheme__textItalic">`Math.random()` </em></i><span>is </span><b><strong class="CertTheme__textBold">not pure</strong></b><span>.</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>Now consider the below </span><b><strong class="CertTheme__textBold">add</strong></b><span> function doesn’t alter “a” or “b”, always returns the same output for the same input.</span><br><span>So, it’s a “pure” function</span></p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-tdgeyflgr" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm"><span class="CertTheme__tokenAttr">const</span><span> </span><span>add</span><span> </span><span class="CertTheme__tokenOperator">=</span><span> </span><span class="CertTheme__tokenPunctuation">(</span><span>a</span><span class="CertTheme__tokenPunctuation">,</span><span> b</span><span class="CertTheme__tokenPunctuation">)</span><span> </span><span class="CertTheme__tokenOperator">=&gt;</span><span> a </span><span class="CertTheme__tokenOperator">+</span><span> b </span><span class="CertTheme__tokenComment">//pure function</span></pre></div></div><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>The second condition is that it should not produce any side effects. It basically means it should not change any external state.</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>Consider, the below code. The function addNum changes the values of external “a”, so it’s not a pure function.</span></p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-dasyn8ary" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm"><span class="CertTheme__tokenAttr">var</span><span> a </span><span class="CertTheme__tokenOperator">=</span><span> </span><span class="CertTheme__tokenProperty">10</span><span class="CertTheme__tokenPunctuation">;</span><br><span class="CertTheme__tokenAttr">function</span><span> </span><span class="CertTheme__tokenFunction">addNum</span><span class="CertTheme__tokenPunctuation">(</span><span>num</span><span class="CertTheme__tokenPunctuation">)</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span>&nbsp;a </span><span class="CertTheme__tokenOperator">=</span><span> </span><span class="CertTheme__tokenProperty">20</span><span class="CertTheme__tokenPunctuation">;</span><br><span>&nbsp;</span><span class="CertTheme__tokenAttr">return</span><span> num </span><span class="CertTheme__tokenOperator">+</span><span> a</span><span class="CertTheme__tokenPunctuation">;</span><br><span class="CertTheme__tokenPunctuation">}</span><br><span>console</span><span class="CertTheme__tokenPunctuation">.</span><span class="CertTheme__tokenFunction">log</span><span class="CertTheme__tokenPunctuation">(</span><span class="CertTheme__tokenFunction">addNum</span><span class="CertTheme__tokenPunctuation">(</span><span class="CertTheme__tokenProperty">5</span><span class="CertTheme__tokenPunctuation">)</span><span class="CertTheme__tokenPunctuation">)</span><span class="CertTheme__tokenPunctuation">;</span><span> </span><span class="CertTheme__tokenComment">//25</span><br><span>console</span><span class="CertTheme__tokenPunctuation">.</span><span class="CertTheme__tokenFunction">log</span><span class="CertTheme__tokenPunctuation">(</span><span>a</span><span class="CertTheme__tokenPunctuation">)</span><span class="CertTheme__tokenPunctuation">;</span><span> </span><span class="CertTheme__tokenComment">//20</span></pre></div></div><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>Reducers are Pure Functions as they don’t mutate the state. It generates a new state which is a copy of the old state.</span></p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-as6qryk0z" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm"><span class="CertTheme__tokenAttr">const</span><span> initialState </span><span class="CertTheme__tokenOperator">=</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span>&nbsp; &nbsp;indPopData</span><span class="CertTheme__tokenOperator">:</span><span> </span><span class="CertTheme__tokenPunctuation">[</span><span class="CertTheme__tokenPunctuation">]</span><span class="CertTheme__tokenPunctuation">,</span><br><span class="CertTheme__tokenPunctuation">}</span><span class="CertTheme__tokenPunctuation">;</span><br><span class="CertTheme__tokenAttr">const</span><span> </span><span>dataReducer</span><span> </span><span class="CertTheme__tokenOperator">=</span><span> </span><span class="CertTheme__tokenPunctuation">(</span><span>state </span><span class="CertTheme__tokenOperator">=</span><span> initialState</span><span class="CertTheme__tokenPunctuation">,</span><span> action</span><span class="CertTheme__tokenPunctuation">)</span><span> </span><span class="CertTheme__tokenOperator">=&gt;</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span>&nbsp; &nbsp;</span><span class="CertTheme__tokenAttr">let</span><span> newState</span><span class="CertTheme__tokenPunctuation">;</span><br><span>&nbsp; &nbsp;</span><span class="CertTheme__tokenAttr">switch</span><span> </span><span class="CertTheme__tokenPunctuation">(</span><span>action</span><span class="CertTheme__tokenPunctuation">.</span><span>type</span><span class="CertTheme__tokenPunctuation">)</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span>&nbsp; &nbsp; &nbsp;</span><span class="CertTheme__tokenAttr">case</span><span> types</span><span class="CertTheme__tokenPunctuation">.</span><span class="CertTheme__tokenProperty">GET_INDIA_DATA</span><span class="CertTheme__tokenOperator">:</span><br><span>&nbsp; &nbsp; &nbsp; &nbsp;newState </span><span class="CertTheme__tokenOperator">=</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><span> </span><span class="CertTheme__tokenOperator">...</span><span>state</span><span class="CertTheme__tokenPunctuation">,</span><span> </span><span>indPopData</span><span class="CertTheme__tokenOperator">:</span><span> action</span><span class="CertTheme__tokenPunctuation">.</span><span>indPopData </span><span class="CertTheme__tokenPunctuation">}</span><span class="CertTheme__tokenPunctuation">;</span><br><span>&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="CertTheme__tokenAttr">break</span><span class="CertTheme__tokenPunctuation">;</span><br><span>&nbsp; &nbsp; &nbsp;</span><span class="CertTheme__tokenAttr">default</span><span class="CertTheme__tokenOperator">:</span><br><span>&nbsp; &nbsp; &nbsp; &nbsp;newState </span><span class="CertTheme__tokenOperator">=</span><span> state</span><span class="CertTheme__tokenPunctuation">;</span><br><span>&nbsp; &nbsp;</span><span class="CertTheme__tokenPunctuation">}</span><br><span>&nbsp; &nbsp;</span><span class="CertTheme__tokenAttr">return</span><span> newState</span><span class="CertTheme__tokenPunctuation">;</span><br><span>&nbsp;</span><span class="CertTheme__tokenPunctuation">}</span><span class="CertTheme__tokenPunctuation">;</span></pre></div></div><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><br></p></div></div></div></div><div class="relative"><div class="mt-spacing20 z-10 relative text-center flex justify-center mt-0"><button class="flex items-center gap-x-spacing8 py-spacing4"><span class="text-sm underline font-semibold text-mono-black">View all questions</span><i class="icon-chevron-down-double text-xl leading-5 text-neutral-800"></i></button></div><div class="absolute bottom-0 block h-32 w-full bg-gradient-to-t from-subdued/100 from-30% md:from-40%"></div></div></div></div></div><div class="hidden"><div><div class="text-xl text-neutral-800 mb-spacing20 font-bold">Advanced</div><div class="relative w-full"><div class="rounded-xl mb-spacing24 last:mb-0 outline duration-300 transition ease-in-out outline-primary-main outline-2 shadow-card hover:shadow-card visible"><div class="cursor-pointer items-center justify-between p-4 transition-all duration-500 undefined bg-white p-spacing16 pl-spacing24 flex gap-spacing8 rounded-t-xl"><div class="flex text-sm font-semibold items-center overflow-x-auto"><h3 class="text-neutral-800 font-bold text-sm leading-5.5 -indent-0 pl-5 overflow-hidden">1. Write a small piece of code to render a button.</h3></div><div class="md:w-5 md:h-5 w-6 h-6 ml-spacing8 flex items-center transition-all duration-300"><i class="icon-chevron-up-filled inline-block transition-transform duration-300 text-xl rotate-0 text-neutral-800"></i></div></div><div class="overflow-hidden p-0 transition-all duration-500 ease-in-out rounded-b-xl" style="max-height:0px"><div><div class="p-spacing24 bg-white border-t border-neutral-200 faq-editor-content last:rounded-b-xl"><p></p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-93xclqzqe" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm">import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
function Button(props) {
return (
&lt;button type="submit"&gt;{props.label}&lt;/button&gt;
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(&lt;Button label="Save" /&gt;, rootElement);</pre></div></div><p></p></div></div></div></div><div class="rounded-xl mb-spacing24 last:mb-0 outline duration-300 transition ease-in-out outline-1 outline-neutral-200 hover:outline-neutral-400 hover:shadow-neutralShadow visible"><div class="cursor-pointer items-center justify-between p-4 transition-all duration-500 undefined bg-white p-spacing16 pl-spacing24 flex gap-spacing8 rounded-xl"><div class="flex text-sm font-semibold items-center overflow-x-auto"><h3 class="text-neutral-800 font-bold text-sm leading-5.5 -indent-0 pl-5 overflow-hidden line-clamp-2">2. What is the output of the following code.</h3></div><div class="md:w-5 md:h-5 w-6 h-6 ml-spacing8 flex items-center transition-all duration-300"><i class="icon-chevron-up-filled inline-block transition-transform duration-300 text-xl rotate-180 text-primary-main"></i></div></div><div class="overflow-hidden p-0 transition-all duration-500 ease-in-out rounded-b-xl" style="max-height:0px"><div><div class="p-spacing24 bg-white border-t border-neutral-200 faq-editor-content last:rounded-b-xl"><p></p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-jf9w96bkr" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm">import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
function App() {
const check = 0; //<em>&nbsp;0, "", null, undefined</em>
return (
&lt;div className="App"&gt;
{ check &amp;&amp; &lt;span&gt;Hello&lt;/span&gt; }
&lt;/div&gt;
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(&lt;App /&gt;, rootElement);</pre></div></div><p>This will render 0 to the browser.</p><ul><li class="CertTheme__listItem pt-spacing10">When using conditional rendering using logical &amp;&amp; operator 0 is evaluated as number and will be rendered by the browser</li><li class="CertTheme__listItem pt-spacing10">How we can avoid rendering 0 in the above case.</li></ul><p>We need to make the 0 a Boolean by adding !. Code is given below</p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-q8oejtakq" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm">import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
function App() {
const check = 0; //<em>&nbsp;0, "", null, undefined</em>
return (
&lt;div className="App"&gt;
{ !check &amp;&amp; &lt;span&gt;Hello&lt;/span&gt; }
&lt;/div&gt;
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(&lt;App /&gt;, rootElement);</pre></div></div><p></p></div></div></div></div><div class="rounded-xl mb-spacing24 last:mb-0 outline duration-300 transition ease-in-out outline-1 outline-neutral-200 hover:outline-neutral-400 hover:shadow-neutralShadow visible"><div class="cursor-pointer items-center justify-between p-4 transition-all duration-500 undefined bg-white p-spacing16 pl-spacing24 flex gap-spacing8 rounded-xl"><div class="flex text-sm font-semibold items-center overflow-x-auto"><h3 class="text-neutral-800 font-bold text-sm leading-5.5 -indent-0 pl-5 overflow-hidden line-clamp-2">3. How react router works</h3></div><div class="md:w-5 md:h-5 w-6 h-6 ml-spacing8 flex items-center transition-all duration-300"><i class="icon-chevron-up-filled inline-block transition-transform duration-300 text-xl rotate-180 text-primary-main"></i></div></div><div class="overflow-hidden p-0 transition-all duration-500 ease-in-out rounded-b-xl" style="max-height:0px"><div><div class="p-spacing24 bg-white border-t border-neutral-200 faq-editor-content last:rounded-b-xl"><p></p><p><span data-contrast="none" lang="EN-US"><strong><em>This is a frequently asked question in React interview questions for experienced.</em></strong></span><em><strong><span data-ccp-props="{&quot;201341983&quot;:0,&quot;335559739&quot;:160,&quot;335559740&quot;:259}">&nbsp;</span>&nbsp;</strong></em></p><p>React router is a commonly used module for routing in React applications.</p><p>React router component listens to history changes in React applications. It has a URL mapping to components in it. It renders the corresponding component when a match is found.</p><p>Link component is used to navigate around in your application.</p><p><strong>Code sample below</strong></p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-1hw1m94kg" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm">import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
const App = () =&gt; (
&lt;Router&gt;
&lt;&gt;
&lt;Link to="/"&gt;Home&lt;/Link&gt; &lt;Link to="/page"&gt;Page&lt;/Link&gt;
&lt;Route exact path="/" component={Home} /&gt;
&lt;Route path="/page" component={Page} /&gt;
&lt;/&gt;
&lt;/Router&gt;
)
const Home = () =&gt; &lt;h2&gt;Home&lt;/h2&gt;;
const Page = () =&gt; &lt;h2&gt;Page&lt;/h2&gt;;
const rootElement = document.getElementById("root");
ReactDOM.render(&lt;App label="Save" /&gt;, rootElement);</pre></div></div><p></p></div></div></div></div><div class="rounded-xl mb-spacing24 last:mb-0 outline duration-300 transition ease-in-out outline-1 outline-neutral-200 hover:outline-neutral-400 hover:shadow-neutralShadow visible"><div class="cursor-pointer items-center justify-between p-4 transition-all duration-500 undefined bg-white p-spacing16 pl-spacing24 flex gap-spacing8 rounded-xl"><div class="flex text-sm font-semibold items-center overflow-x-auto"><h3 class="text-neutral-800 font-bold text-sm leading-5.5 -indent-0 pl-5 overflow-hidden line-clamp-2">4. What is known as Fragment in React.</h3></div><div class="md:w-5 md:h-5 w-6 h-6 ml-spacing8 flex items-center transition-all duration-300"><i class="icon-chevron-up-filled inline-block transition-transform duration-300 text-xl rotate-180 text-primary-main"></i></div></div><div class="overflow-hidden p-0 transition-all duration-500 ease-in-out rounded-b-xl" style="max-height:0px"><div><div class="p-spacing24 bg-white border-t border-neutral-200 faq-editor-content last:rounded-b-xl"><p></p><ul><li class="CertTheme__listItem pt-spacing10">How to return multiple components without wrapping using div, HOC or Fragment</li><li class="CertTheme__listItem pt-spacing10">Fragments help you return a list of items without adding extra nodes to the DOM.</li><li class="CertTheme__listItem pt-spacing10">Return as an Array. This is introduced since React 16</li></ul><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-ykb9av9vp" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm">import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
function App() {
return (
[
&lt;p&gt;one&lt;/p&gt;,
&lt;p&gt;two&lt;/p&gt;
]
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(&lt;App /&gt;, rootElement);</pre></div></div><p></p></div></div></div></div><div class="rounded-xl mb-spacing24 last:mb-0 outline duration-300 transition ease-in-out outline-1 outline-neutral-200 hover:outline-neutral-400 hover:shadow-neutralShadow visible"><div class="cursor-pointer items-center justify-between p-4 transition-all duration-500 undefined bg-white p-spacing16 pl-spacing24 flex gap-spacing8 rounded-xl"><div class="flex text-sm font-semibold items-center overflow-x-auto"><h3 class="text-neutral-800 font-bold text-sm leading-5.5 -indent-0 pl-5 overflow-hidden line-clamp-2">5. What all ways data can be passed between react components</h3></div><div class="md:w-5 md:h-5 w-6 h-6 ml-spacing8 flex items-center transition-all duration-300"><i class="icon-chevron-up-filled inline-block transition-transform duration-300 text-xl rotate-180 text-primary-main"></i></div></div><div class="overflow-hidden p-0 transition-all duration-500 ease-in-out rounded-b-xl" style="max-height:0px"><div><div class="p-spacing24 bg-white border-t border-neutral-200 faq-editor-content last:rounded-b-xl"><p></p><p><span data-contrast="none" lang="EN-US"><strong><em>Expect to come across this popular question in React interview questions.</em></strong></span><em><strong><span data-ccp-props="{&quot;201341983&quot;:0,&quot;335559739&quot;:160,&quot;335559740&quot;:259}">&nbsp;</span>&nbsp;<br></strong></em></p><ul><li class="CertTheme__listItem pt-spacing10">Parent to child – props, context</li><li class="CertTheme__listItem pt-spacing10">Child to parent – states, callbacks</li><li class="CertTheme__listItem pt-spacing10">Siblings – callback, props, context</li></ul><p></p></div></div></div></div><div class="rounded-xl mb-spacing24 last:mb-0 outline duration-300 transition ease-in-out outline-1 outline-neutral-200 hover:outline-neutral-400 hover:shadow-neutralShadow hidden"><div class="cursor-pointer items-center justify-between p-4 transition-all duration-500 undefined bg-white p-spacing16 pl-spacing24 flex gap-spacing8 rounded-xl"><div class="flex text-sm font-semibold items-center overflow-x-auto"><h3 class="text-neutral-800 font-bold text-sm leading-5.5 -indent-0 pl-5 overflow-hidden line-clamp-2">6. Write a program to pass values to child using context.</h3></div><div class="md:w-5 md:h-5 w-6 h-6 ml-spacing8 flex items-center transition-all duration-300"><i class="icon-chevron-up-filled inline-block transition-transform duration-300 text-xl rotate-180 text-primary-main"></i></div></div><div class="overflow-hidden p-0 transition-all duration-500 ease-in-out rounded-b-xl" style="max-height:0px"><div><div class="p-spacing24 bg-white border-t border-neutral-200 faq-editor-content last:rounded-b-xl"><p></p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-mgrsvppgm" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm">import React, { Component } from "react";
import Intl, { IntlProvider } from "./Intl";
import ReactDOM from "react-dom";
import "./styles.css";
class App extends Component {
state = {
language: "en"
};
handleClick = () =&gt; {
this.setState({
language: this.state.language === "en" ? "fr" : "en"
});
};
render() {
return (
&lt;div className="App"&gt;
&lt;IntlProvider language={this.state.language}&gt;
&lt;p&gt;
&lt;Intl id="hello" /&gt; &lt;Intl id="world" /&gt;!
&lt;/p&gt;
&lt;p&gt;
&lt;button onClick={this.handleClick}&gt;Toggle Language&lt;/button&gt;
&lt;/p&gt;
&lt;/IntlProvider&gt;
&lt;/div&gt;
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(&lt;App /&gt;, rootElement);</pre></div></div><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-q0d7og53b" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm">import React, { createContext } from "react";
const IntlContext = createContext(null);
const IntlProvider = ({ children, language }) =&gt; {
const languages = {
en: {
hello: "hello",
world: "world"
},
fr: {
hello: "Bonjour",
world: "monde"
}
};
return (
&lt;IntlContext.Provider value={languages[language]}&gt;
{children}
&lt;/IntlContext.Provider&gt;
);
};
const Intl = ({ id }) =&gt; (
&lt;IntlContext.Consumer&gt;{value =&gt; value[id]}&lt;/IntlContext.Consumer&gt;
);
export { IntlProvider };
export default Intl;</pre></div></div><p></p></div></div></div></div><div class="rounded-xl mb-spacing24 last:mb-0 outline duration-300 transition ease-in-out outline-1 outline-neutral-200 hover:outline-neutral-400 hover:shadow-neutralShadow hidden"><div class="cursor-pointer items-center justify-between p-4 transition-all duration-500 undefined bg-white p-spacing16 pl-spacing24 flex gap-spacing8 rounded-xl"><div class="flex text-sm font-semibold items-center overflow-x-auto"><h3 class="text-neutral-800 font-bold text-sm leading-5.5 -indent-0 pl-5 overflow-hidden line-clamp-2">7. What are keys and its significance in Listing</h3></div><div class="md:w-5 md:h-5 w-6 h-6 ml-spacing8 flex items-center transition-all duration-300"><i class="icon-chevron-up-filled inline-block transition-transform duration-300 text-xl rotate-180 text-primary-main"></i></div></div><div class="overflow-hidden p-0 transition-all duration-500 ease-in-out rounded-b-xl" style="max-height:0px"><div><div class="p-spacing24 bg-white border-t border-neutral-200 faq-editor-content last:rounded-b-xl"><p></p><p>Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity</p><p>The best way to pick a key is to use a string that uniquely identifies a list item among its siblings. Most often you would use IDs from your data as keys</p><p>Keys used within arrays should be unique among their siblings. However they don’t need to be globally unique. We can use the same keys when we produce two different arrays</p><p>To understand this you need understand how the virtual DOM works in React. The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This process is called reconciliation.</p><p>Each time the underlying data changes in a React app, a new Virtual DOM representation of the user interface is created Updating browser DOM is as follows</p><ol class="CertTheme__ol1 pt-spacing10"><li class="CertTheme__listItem pt-spacing10">Whenever anything may have changed, the entire UI will be re-rendered in a Virtual DOM representation.</li><li class="CertTheme__listItem pt-spacing10">The difference between the previous Virtual DOM representation and the new one will be calculated.</li><li class="CertTheme__listItem pt-spacing10">The real DOM will be updated with what has actually changed. This is very much like applying a patch.</li></ol><p>Look at the example given below</p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-0mru4658f" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm">import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
class App extends React.Component {
render() {
const numbers = [1,2,3,4,5];
const listItems = numbers.map((number) =&gt;
&lt;li&gt;
{number}
&lt;/li&gt;
);
return (
&lt;div className="App"&gt;
&lt;h2&gt;Hellow World!!&lt;/h2&gt;
&lt;div&gt;{listItems}&lt;/div&gt;
&lt;/div&gt;
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(&lt;App /&gt;, rootElement);</pre></div></div><p><strong>This will throw a warning in console</strong></p><ul><li class="CertTheme__listItem pt-spacing10">Warning: Each child in an array or iterator should have a unique "key" prop.</li><li class="CertTheme__listItem pt-spacing10">To fix it we should change the arrow function “listItems” to</li></ul><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-32fhcmypd" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm">const listItems = numbers.map((number) =&gt;
&lt;li key={number.toString()}&gt;
{number}
&lt;/li&gt;
);</pre></div></div><p></p></div></div></div></div><div class="rounded-xl mb-spacing24 last:mb-0 outline duration-300 transition ease-in-out outline-1 outline-neutral-200 hover:outline-neutral-400 hover:shadow-neutralShadow hidden"><div class="cursor-pointer items-center justify-between p-4 transition-all duration-500 undefined bg-white p-spacing16 pl-spacing24 flex gap-spacing8 rounded-xl"><div class="flex text-sm font-semibold items-center overflow-x-auto"><h3 class="text-neutral-800 font-bold text-sm leading-5.5 -indent-0 pl-5 overflow-hidden line-clamp-2">8. Explain lifecycle methods and their order of execution</h3></div><div class="md:w-5 md:h-5 w-6 h-6 ml-spacing8 flex items-center transition-all duration-300"><i class="icon-chevron-up-filled inline-block transition-transform duration-300 text-xl rotate-180 text-primary-main"></i></div></div><div class="overflow-hidden p-0 transition-all duration-500 ease-in-out rounded-b-xl" style="max-height:0px"><div><div class="p-spacing24 bg-white border-t border-neutral-200 faq-editor-content last:rounded-b-xl"><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><i><b><strong class="CertTheme__textBold CertTheme__textItalic">A must-know for anyone heading into a React interview, this question is frequently asked in advanced React interview questions.</strong></b></i></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>React lets you define components as classes or functions. Components defined as classes currently provide more features To define a React component class, you need to extend React.Component.</span></p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-efzlrxe98" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm"><span class="CertTheme__tokenAttr">class</span><span> </span><span class="CertTheme__tokenFunction">App</span><span> </span><span class="CertTheme__tokenAttr">extends</span><span> </span><span class="CertTheme__tokenFunction">React</span><span class="CertTheme__tokenPunctuation">.</span><span class="CertTheme__tokenFunction">Component</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span class="CertTheme__tokenFunction">render</span><span class="CertTheme__tokenPunctuation">(</span><span class="CertTheme__tokenPunctuation">)</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span class="CertTheme__tokenAttr">return</span><span> </span><span class="CertTheme__tokenPunctuation">(</span><br><span class="CertTheme__tokenOperator">&lt;</span><span>div className</span><span class="CertTheme__tokenOperator">=</span><span class="CertTheme__tokenSelector">"App"</span><span class="CertTheme__tokenOperator">&gt;</span><br><span class="CertTheme__tokenOperator">&lt;</span><span>h2</span><span class="CertTheme__tokenOperator">&gt;</span><span>Hellow World</span><span class="CertTheme__tokenOperator">!</span><span class="CertTheme__tokenOperator">&lt;</span><span class="CertTheme__tokenOperator">/</span><span>h2</span><span class="CertTheme__tokenOperator">&gt;</span><br><span class="CertTheme__tokenOperator">&lt;</span><span class="CertTheme__tokenOperator">/</span><span>div</span><span class="CertTheme__tokenOperator">&gt;</span><br><span class="CertTheme__tokenPunctuation">)</span><span class="CertTheme__tokenPunctuation">;</span><br><span class="CertTheme__tokenPunctuation">}</span><br><span class="CertTheme__tokenPunctuation">}</span></pre></div></div><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>The only method you must define in a React.Component subclass is called render() All the other methods described on this page are optional.</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>Each component has several “lifecycle methods” that you can override to run code at particular times in the process .</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>Lifecycle methods can be classified into four.</span></p><ol class="CertTheme__ol1 pt-spacing10"><li value="1" class="CertTheme__listItem pt-spacing10"><span>Mounting</span></li><li value="2" class="CertTheme__listItem pt-spacing10"><span>Updating</span></li><li value="3" class="CertTheme__listItem pt-spacing10"><span>Unmounting</span></li><li value="4" class="CertTheme__listItem pt-spacing10"><span>Error handling</span></li></ol><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><b><strong class="CertTheme__textBold">Mounting</strong></b></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>Methods are listed in the order of their execution</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><b><strong class="CertTheme__textBold">constructor()</strong></b></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>The constructor for a React component is called before it is mounted. When implementing the constructor for a React.Component subclass, you should call super(props) before any other statement. Otherwise, this.props will be undefined in the constructor, which can lead to bugs.</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>Typically, in React constructors are only used for two purposes:</span></p><ol class="CertTheme__ol1 pt-spacing10"><li value="1" class="CertTheme__listItem pt-spacing10"><span>Initializing local state by assigning an object to this.state.</span></li><li value="2" class="CertTheme__listItem pt-spacing10"><span>Binding event handler methods to an instance.</span></li></ol><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><b><strong class="CertTheme__textBold">static getDerivedStateFromProps()</strong></b></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>getDerivedStateFromProps is invoked right before calling the render method, both on the initial mount and on subsequent updates. It should return an object to update the state, or null to update nothing.</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>This method exists for rare use cases where the state depends on changes in props over time.</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>This method doesn’t have access to the component instance. If you’d like, you can reuse some code between getDerivedStateFromProps() and the other class methods by extracting pure functions of the component props and state outside the class definition.</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>NOTE that this method is fired on every render, regardless of the cause. This is in contrast to UNSAFE_componentWillReceiveProps, which only fires when the parent causes a re-render and not as a result of a local setState.</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><b><strong class="CertTheme__textBold">render()</strong></b></p><ul class="CertTheme__ul"><li value="1" class="CertTheme__listItem pt-spacing10"><span>The render() method is the only required method in a class component.</span></li><li value="2" class="CertTheme__listItem pt-spacing10"><span>When called, it should examine this.props and this.state and return one of the following types:</span></li><li value="3" class="CertTheme__listItem pt-spacing10"><span>React elements. Typically created via JSX.</span></li><li value="4" class="CertTheme__listItem pt-spacing10"><span>Arrays and fragments. Let you return multiple elements from render. See the documentation on fragments for more details.</span></li><li value="5" class="CertTheme__listItem pt-spacing10"><span>String and numbers. These are rendered as text nodes in the DOM.</span></li><li value="6" class="CertTheme__listItem pt-spacing10"><span>Booleans or null. Render nothing. (Mostly exists to support return test &amp;&amp; &lt;Child /&gt; pattern, where test is boolean.)</span></li></ul><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>The render() function should be pure, meaning that it does not modify component state, it returns the same result each time it’s invoked, and it does not directly interact with the browser.</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>If you need to interact with the browser, perform your work in componentDidMount() or the other lifecycle methods instead. Keeping render() pure makes components easier to think about.</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><b><strong class="CertTheme__textBold">componentDidMount()</strong></b></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>componentDidMount() is invoked immediately after a component is mounted (inserted into the tree). Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request.</span><br><span>This method is a good place to set up any subscriptions. If you do that, don’t forget to unsubscribe in componentWillUnmount().</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>You may call setState() immediately in componentDidMount(). It will trigger an extra rendering, but it will happen before the browser updates the screen. This guarantees that even though the render() will be called twice in this case, the user won’t see the intermediate state. Use this pattern with caution because it often causes performance issues. In most cases, you should be able to assign the initial state in the constructor() instead. It can, however, be necessary for cases like modals and tooltips when you need to measure a DOM node before rendering something that depends on its size or position.</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>Updating An update can be caused by changes to props or state. Methods are listed in the order of their execution</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><b><strong class="CertTheme__textBold">static getDerivedStateFromProps():</strong></b><span> Mentioned above</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><b><strong class="CertTheme__textBold">shouldComponentUpdate()</strong></b></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>Use shouldComponentUpdate() to let React know if a component’s output is not affected by the current change in state or props. The default behavior is to re-render on every state change, and in the vast majority of cases you should rely on the default behavior.</span><br><span>shouldComponentUpdate() is invoked before rendering when new props or state are being received. Defaults to true. This method is not called for the initial render or when forceUpdate() is used.</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>Note that returning false does not prevent child components from re-rendering when their state changes.</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>Currently, if shouldComponentUpdate() returns false, then UNSAFE_componentWillUpdate(), render(), and componentDidUpdate() will not be invoked. In the future React may treat shouldComponentUpdate() as a hint rather than a strict directive, and returning false may still result in a re-rendering of the component.</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><b><strong class="CertTheme__textBold">render()</strong></b><span>: mentioned above</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><b><strong class="CertTheme__textBold">getSnapshotBeforeUpdate()</strong></b></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>getSnapshotBeforeUpdate() is invoked right before the most recently rendered output is committed to e.g. the DOM. It enables your component to capture some information from the DOM (e.g. scroll position) before it is potentially changed. Any value returned by this lifecycle will be passed as a parameter to componentDidUpdate().</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>This use case is not common, but it may occur in UIs like a chat thread that need to handle scroll position in a special way.A snapshot value (or null) should be returned.</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><b><strong class="CertTheme__textBold">componentDidUpdate()</strong></b></p><ul class="CertTheme__ul"><li value="1" class="CertTheme__listItem pt-spacing10"><span>componentDidUpdate() is invoked immediately after updating occurs. This method is not called for the initial render.</span></li><li value="2" class="CertTheme__listItem pt-spacing10"><span>Use this as an opportunity to operate on the DOM when the component has been updated. This is also a good place to do network requests as long as you compare the current props to previous props (e.g. a network request may not be necessary if the props have not changed).</span></li><li value="3" class="CertTheme__listItem pt-spacing10"><span>You may call setState() immediately in componentDidUpdate() but note that it must be wrapped in a condition or you’ll cause an infinite loop. It would also cause an extra re-rendering which, while not visible to the user, can affect the component performance. If you’re trying to “mirror” some state to a prop coming from above, consider using the prop directly instead.</span></li><li value="4" class="CertTheme__listItem pt-spacing10"><span>NOTE componentDidUpdate() will not be invoked if shouldComponentUpdate() returns false.</span></li></ul><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><b><strong class="CertTheme__textBold">Unmounting</strong></b></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>This method is called when a component is being removed from the DOM:</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><b><strong class="CertTheme__textBold">componentWillUnmount()</strong></b></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>componentWillUnmount() is invoked immediately before a component is unmounted and destroyed. Perform any necessary cleanup in this method, such as invalidating timers, canceling network requests, or cleaning up any subscriptions that were created in componentDidMount().</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>You should not call setState() in componentWillUnmount() because the component will never be re-rendered. Once a component instance is unmounted, it will never be mounted again.</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><b><strong class="CertTheme__textBold">Error Handling</strong></b></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>These methods are called when there is an error during rendering, in a lifecycle method, or in the constructor of any child component.</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><b><strong class="CertTheme__textBold">static getDerivedStateFromError()</strong></b></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>This lifecycle is invoked after an error has been thrown by a descendant component. It receives the error that was thrown as a parameter and should return a value to update state.</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>getDerivedStateFromError() is called during the “render” phase, so side-effects are not permitted. For those use cases, use componentDidCatch() instead.</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><b><strong class="CertTheme__textBold">componentDidCatch()</strong></b></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>This lifecycle is invoked after an error has been thrown by a descendant component. It receives two parameters:</span></p><ol class="CertTheme__ol1 pt-spacing10"><li value="1" class="CertTheme__listItem pt-spacing10"><span>error - The error that was thrown.</span></li><li value="2" class="CertTheme__listItem pt-spacing10"><span>info - An object with a componentStack key containing information about which component threw the error.</span></li><li value="3" class="CertTheme__listItem pt-spacing10"><span>componentDidCatch() is called during the “commit” phase, so side-effects are permitted. It should be used for things like logging errors:</span></li></ol><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>In the event of an error, you can render a fallback UI with componentDidCatch() by calling setState, but this will be deprecated in a future release. Use static getDerivedStateFromError() to handle fallback rendering instead.</span></p></div></div></div></div><div class="rounded-xl mb-spacing24 last:mb-0 outline duration-300 transition ease-in-out outline-1 outline-neutral-200 hover:outline-neutral-400 hover:shadow-neutralShadow hidden"><div class="cursor-pointer items-center justify-between p-4 transition-all duration-500 undefined bg-white p-spacing16 pl-spacing24 flex gap-spacing8 rounded-xl"><div class="flex text-sm font-semibold items-center overflow-x-auto"><h3 class="text-neutral-800 font-bold text-sm leading-5.5 -indent-0 pl-5 overflow-hidden line-clamp-2">9. What are Pure components in React</h3></div><div class="md:w-5 md:h-5 w-6 h-6 ml-spacing8 flex items-center transition-all duration-300"><i class="icon-chevron-up-filled inline-block transition-transform duration-300 text-xl rotate-180 text-primary-main"></i></div></div><div class="overflow-hidden p-0 transition-all duration-500 ease-in-out rounded-b-xl" style="max-height:0px"><div><div class="p-spacing24 bg-white border-t border-neutral-200 faq-editor-content last:rounded-b-xl"><p></p><p><span data-contrast="none" lang="EN-US"><strong><em>It's no surprise that this one pops up often in advanced React interview questions.</em></strong></span><em><strong><span data-ccp-props="{&quot;201341983&quot;:0,&quot;335559739&quot;:160,&quot;335559740&quot;:259}">&nbsp;</span>&nbsp;</strong></em></p><p>React.PureComponent is one of the most significant ways to optimize React applications that is easy and fast to implement. The usage of React.PureComponent gives a considerable increase in performance because it reduces the number of render operation in the application.</p><p>By default, a plain React.Component has shouldComponentUpdate set to always return true.<br>One way to deal with these extra re-renders is to change the shouldComponentUpdate function to check when your component needs to update</p><p>A common pitfall when converting from Component to PureComponent is to forget that the children need to re-render too. As with all React - if the parent doesn’t re-render the children won’t either. So if you have a PureComponent with children, those children can only update if the parent’s state or props are shallowly different (causing the parent to re-render).<br>You can only have a PureComponent parent if you know none of the children should re-render if the parent doesn’t re-render.<br>If your React component’s render function renders the same result given the same props and state, you can use React.PureComponent for a performance boost in some cases.</p><p>This is how React shallow compares (copied from React source code)</p><p><img alt="React source code" loading="lazy" width="100" height="100" decoding="async"  class="fr-fic fr-dib" style="color:transparent;width:100%;height:auto;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url(&quot;data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3C/filter%3E%3Cimage preserveAspectRatio='none' filter='url(%23b)' x='0' y='0' height='100%25' width='100%25' href='data:image/svg+xml;base64,CiAgPHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxkZWZzPgogICAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImciPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNjY2MiIG9mZnNldD0iMjAlIiAvPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNkZGQiIG9mZnNldD0iNTAlIiAvPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNlZWUiIG9mZnNldD0iNzAlIiAvPgogICAgICA8L2xpbmVhckdyYWRpZW50PgogICAgPC9kZWZzPgogICAgPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9IiNlZWUiIC8+CiAgICA8cmVjdCBpZD0iciIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjZykiIC8+CiAgICA8YW5pbWF0ZSB4bGluazpocmVmPSIjciIgYXR0cmlidXRlTmFtZT0ieCIgZnJvbT0iLTEwMCIgdG89IjEwMCIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiICAvPgogIDwvc3ZnPg=='/%3E%3C/svg%3E&quot;)" sizes="(min-width: 767px) 50vw, 100vw" srcSet="" src="https://images.unsplash.com/photo-1488190211105-8b0e84b7e8d1?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80"></p><p>Code sample below</p><p>In the given example when we extend Display component from React.Component the render function will be called each time you click the button.</p><p>Instead if you extend the Display component from React.PureComponent the render function will be called only once. That means it calls render when the prop Is shallowly different</p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-bh50q3lis" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm">import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import Display from "./Display";
function App() {
return (
&lt;div className="App"&gt;
&lt;Display chek={10} /&gt;
&lt;/div&gt;
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(&lt;App /&gt;, rootElement);</pre></div></div><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-qdmoesnks" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm">import React from "react";
class Display extends React.PureComponent {
constructor(props){
super(props);
this.state = {
obj1: 1
}
}
updateMe = () =&gt; {
this.setState({
obj1: this.props.chek
});
};
render(){
console.log("render called");
return (
&lt;&gt;
&lt;div&gt;{this.state.obj1}&lt;/div&gt;
&lt;div&gt;
&lt;button type="submit" onClick={this.updateMe}&gt;
click here
&lt;/button&gt;
&lt;/div&gt;
&lt;/&gt;
)
}
}
export default Display;</pre></div></div><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-xob62m27k" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm">import React from "react";
class Display extends React.Component {
constructor(props){
super(props);
this.state = {
obj1: 1
}
}
updateMe = () =&gt; {
this.setState({
obj1: this.props.chek
});
};
render(){
console.log("render called");
return (
&lt;&gt;
&lt;div&gt;{this.state.obj1}&lt;/div&gt;
&lt;div&gt;
&lt;button type="submit" onClick={this.updateMe}&gt;
click here
&lt;/button&gt;
&lt;/div&gt;
&lt;/&gt;
)
}
}
export default Display;</pre></div></div><p></p></div></div></div></div><div class="rounded-xl mb-spacing24 last:mb-0 outline duration-300 transition ease-in-out outline-1 outline-neutral-200 hover:outline-neutral-400 hover:shadow-neutralShadow hidden"><div class="cursor-pointer items-center justify-between p-4 transition-all duration-500 undefined bg-white p-spacing16 pl-spacing24 flex gap-spacing8 rounded-xl"><div class="flex text-sm font-semibold items-center overflow-x-auto"><h3 class="text-neutral-800 font-bold text-sm leading-5.5 -indent-0 pl-5 overflow-hidden line-clamp-2">10. Why API calls are to be made from componentDidMount and not in constructor/componentWillMount</h3></div><div class="md:w-5 md:h-5 w-6 h-6 ml-spacing8 flex items-center transition-all duration-300"><i class="icon-chevron-up-filled inline-block transition-transform duration-300 text-xl rotate-180 text-primary-main"></i></div></div><div class="overflow-hidden p-0 transition-all duration-500 ease-in-out rounded-b-xl" style="max-height:0px"><div><div class="p-spacing24 bg-white border-t border-neutral-200 faq-editor-content last:rounded-b-xl"><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>This is recommended to avoid side effects. Render method will get called immediately after the componentWillMount and no way we can make the render method wait until the API has returned.</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>Constructor is a place where we define the variables and not make any API calls. API calls can have side effects and should not be used inside constructor</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>React expects state to be available as render function will be called next after componentWillMount and code can break if any mentioned state variable is missing which may occur in case of ajax API calls</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>One more reason is If we are doing server-side rendering of React components componentWillMount will get called on the server-side and again on the client, resulting in calling fetch two times. Hence, this is not definitely the place where we should integrate our APIs.</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>NOTE: A side effect is any application state change that is observable outside the called function other than its return value. Eg: modifying a global variable</span></p></div></div></div></div><div class="rounded-xl mb-spacing24 last:mb-0 outline duration-300 transition ease-in-out outline-1 outline-neutral-200 hover:outline-neutral-400 hover:shadow-neutralShadow hidden"><div class="cursor-pointer items-center justify-between p-4 transition-all duration-500 undefined bg-white p-spacing16 pl-spacing24 flex gap-spacing8 rounded-xl"><div class="flex text-sm font-semibold items-center overflow-x-auto"><h3 class="text-neutral-800 font-bold text-sm leading-5.5 -indent-0 pl-5 overflow-hidden line-clamp-2">11. Explain the initial cycle in React which happens during the first render?</h3></div><div class="md:w-5 md:h-5 w-6 h-6 ml-spacing8 flex items-center transition-all duration-300"><i class="icon-chevron-up-filled inline-block transition-transform duration-300 text-xl rotate-180 text-primary-main"></i></div></div><div class="overflow-hidden p-0 transition-all duration-500 ease-in-out rounded-b-xl" style="max-height:0px"><div><div class="p-spacing24 bg-white border-t border-neutral-200 faq-editor-content last:rounded-b-xl"><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><i><b><strong class="CertTheme__textBold CertTheme__textItalic">Expect to come across this popular question in React interview questions for experienced.</strong></b></i></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>When a React App loads for the first time, the code is run in the mentioned order. All the below-mentioned methods run only one time except “render()”, which can be run many times depending on setState and Parent component be called.</span><br><br><span>1) The “constructor()” is the first thing to be called. You can set the initial state here like below.</span></p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-5809wkun4" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm"><span>&nbsp;</span><span class="CertTheme__tokenFunction">constructor</span><span class="CertTheme__tokenPunctuation">(</span><span class="CertTheme__tokenPunctuation">)</span><span class="CertTheme__tokenPunctuation">{</span><br><span>&nbsp; &nbsp;</span><span class="CertTheme__tokenAttr">super</span><span class="CertTheme__tokenPunctuation">(</span><span class="CertTheme__tokenPunctuation">)</span><span class="CertTheme__tokenPunctuation">;</span><br><span>&nbsp; &nbsp;</span><span class="CertTheme__tokenAttr">this</span><span class="CertTheme__tokenPunctuation">.</span><span>state </span><span class="CertTheme__tokenOperator">=</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span>&nbsp; &nbsp; &nbsp;spinLogo</span><span class="CertTheme__tokenOperator">:</span><span> </span><span class="CertTheme__tokenProperty">true</span><br><span>&nbsp; &nbsp;</span><span class="CertTheme__tokenPunctuation">}</span><span class="CertTheme__tokenPunctuation">;</span><br><span>&nbsp;</span><span class="CertTheme__tokenPunctuation">}</span></pre></div></div><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><br><span>2) Then the “componentWillMount()” will be called. It is very similar to the constructor and called only once before the initial mounting of DOM. That is the reason, it doesn’t have access to the DOM. React documentation recommends us to use constructor instead of this lifecycle method and it will be soon deprecated.</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>3) Then the initial “render()” will be called. It will also render all the child components(if any) of this component. Also, note that render is generally called many times. Whenever we use setState, the component render is called.</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>4) Then the function “componentDidMount()” will be called. This function will also be called once during the whole life-cycle. It is a great place to do AJAX call to the server to fetch some data. You can also initialize something that requires interaction with the DOM, like a jQuery library.</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><img alt="Initial cycle in React " loading="lazy" width="100" height="100" decoding="async"  class="" style="color:transparent;width:100%;height:auto;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url(&quot;data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3C/filter%3E%3Cimage preserveAspectRatio='none' filter='url(%23b)' x='0' y='0' height='100%25' width='100%25' href='data:image/svg+xml;base64,CiAgPHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxkZWZzPgogICAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImciPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNjY2MiIG9mZnNldD0iMjAlIiAvPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNkZGQiIG9mZnNldD0iNTAlIiAvPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNlZWUiIG9mZnNldD0iNzAlIiAvPgogICAgICA8L2xpbmVhckdyYWRpZW50PgogICAgPC9kZWZzPgogICAgPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9IiNlZWUiIC8+CiAgICA8cmVjdCBpZD0iciIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjZykiIC8+CiAgICA8YW5pbWF0ZSB4bGluazpocmVmPSIjciIgYXR0cmlidXRlTmFtZT0ieCIgZnJvbT0iLTEwMCIgdG89IjEwMCIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiICAvPgogIDwvc3ZnPg=='/%3E%3C/svg%3E&quot;)" sizes="(min-width: 767px) 50vw, 100vw" srcSet="" src="https://images.unsplash.com/photo-1513258496099-48135e5d3c8f?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80"></p></div></div></div></div><div class="rounded-xl mb-spacing24 last:mb-0 outline duration-300 transition ease-in-out outline-1 outline-neutral-200 hover:outline-neutral-400 hover:shadow-neutralShadow hidden"><div class="cursor-pointer items-center justify-between p-4 transition-all duration-500 undefined bg-white p-spacing16 pl-spacing24 flex gap-spacing8 rounded-xl"><div class="flex text-sm font-semibold items-center overflow-x-auto"><h3 class="text-neutral-800 font-bold text-sm leading-5.5 -indent-0 pl-5 overflow-hidden line-clamp-2">12. Explain lifecycle of component re-rendering due to re-rendering of parent component?</h3></div><div class="md:w-5 md:h-5 w-6 h-6 ml-spacing8 flex items-center transition-all duration-300"><i class="icon-chevron-up-filled inline-block transition-transform duration-300 text-xl rotate-180 text-primary-main"></i></div></div><div class="overflow-hidden p-0 transition-all duration-500 ease-in-out rounded-b-xl" style="max-height:0px"><div><div class="p-spacing24 bg-white border-t border-neutral-200 faq-editor-content last:rounded-b-xl"><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>There is a type of re-rendering, which happens to all child components when the parent component re-renders.</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>It also happens when you are using a React-redux model and the server call request have been completed and you have just received new props in mapStateToProps().</span></p><ul class="CertTheme__ul"><li value="1" class="CertTheme__listItem pt-spacing10"><span>The “componentWillReceiveProps()” will be called whenever the component receives a new set of props. This lifecycle method is a case of common use, when we receive props back from redux in mapStateToProps(). After that we can set the state depending on props, as calling this.setState here will not cause a re-render.</span></li></ul><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-xmuccp2db" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm"><span class="CertTheme__tokenFunction">componentWillReceiveProps</span><span class="CertTheme__tokenPunctuation">(</span><span>nextProps</span><span class="CertTheme__tokenPunctuation">)</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span class="CertTheme__tokenAttr">if</span><span> </span><span class="CertTheme__tokenPunctuation">(</span><span class="CertTheme__tokenAttr">this</span><span class="CertTheme__tokenPunctuation">.</span><span>props</span><span class="CertTheme__tokenPunctuation">.</span><span>chinaPopData </span><span class="CertTheme__tokenOperator">!==</span><span> nextProps</span><span class="CertTheme__tokenPunctuation">.</span><span>chinaPopData</span><span class="CertTheme__tokenPunctuation">)</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span class="CertTheme__tokenAttr">this</span><span class="CertTheme__tokenPunctuation">.</span><span class="CertTheme__tokenFunction">setState</span><span class="CertTheme__tokenPunctuation">(</span><span class="CertTheme__tokenPunctuation">{</span><br><span>&nbsp; &nbsp; chinaPopData</span><span class="CertTheme__tokenOperator">:</span><span> nextProps</span><span class="CertTheme__tokenPunctuation">.</span><span>chinaPopData</span><span class="CertTheme__tokenPunctuation">.</span><span class="CertTheme__tokenFunction">map</span><span class="CertTheme__tokenPunctuation">(</span><span>item</span><span> </span><span class="CertTheme__tokenOperator">=&gt;</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><span class="CertTheme__tokenAttr">return</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><span>name</span><span class="CertTheme__tokenOperator">:</span><span> &nbsp; &nbsp; item</span><span class="CertTheme__tokenPunctuation">.</span><span>aged</span><span class="CertTheme__tokenPunctuation">,</span><span> </span><span>value</span><span class="CertTheme__tokenOperator">:</span><span>item</span><span class="CertTheme__tokenPunctuation">.</span><span>totaled</span><span class="CertTheme__tokenPunctuation">}</span><span class="CertTheme__tokenPunctuation">}</span><span class="CertTheme__tokenPunctuation">)</span><span class="CertTheme__tokenPunctuation">)</span><br><span class="CertTheme__tokenPunctuation">}</span><span class="CertTheme__tokenPunctuation">)</span><span class="CertTheme__tokenPunctuation">;</span><br><span class="CertTheme__tokenPunctuation">}</span></pre></div></div><ul class="CertTheme__ul"><li value="1" class="CertTheme__listItem pt-spacing10"><span>The “shouldComponentUpdate()” lifecycle method is an method, by which we can decide whether to render a component or not. It is mainly used to increase the performance of poor performing components.</span></li></ul><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>If we return false, it means React will not execute the lifecycle methods - componentWillUpdate() and componentDidUpdate() and also the render()</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><i><em class="CertTheme__textItalic">If it is not used in the project, then React internally gives the default value of true to it.</em></i></p><ul class="CertTheme__ul"><li value="1" class="CertTheme__listItem pt-spacing10"><span>The next to execute is the lifecycle method “componentWillUpdate()”. This method is called before the render(), but not during the initial first render. It can be used as a replacement of </span><i><em class="CertTheme__textItalic">componentWillReceiveProps()</em></i><span> because it is called whenever props are passed to the component or state is changed.</span></li><li value="2" class="CertTheme__listItem pt-spacing10"><span>Next, the render() of the component is called and with it, all child components(if any) will be called.</span></li><li value="3" class="CertTheme__listItem pt-spacing10"><span>Lastly the “componentDidUpdate()” lifecycle method will be called. This method is called after the render(). It is a good place to work with any third party library requiring access to the DOM, like a jQuery plugin.</span></li></ul><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><img alt="lifecycle of component re-rendering" loading="lazy" width="100" height="100" decoding="async"  class="" style="color:transparent;width:100%;height:auto;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url(&quot;data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3C/filter%3E%3Cimage preserveAspectRatio='none' filter='url(%23b)' x='0' y='0' height='100%25' width='100%25' href='data:image/svg+xml;base64,CiAgPHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxkZWZzPgogICAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImciPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNjY2MiIG9mZnNldD0iMjAlIiAvPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNkZGQiIG9mZnNldD0iNTAlIiAvPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNlZWUiIG9mZnNldD0iNzAlIiAvPgogICAgICA8L2xpbmVhckdyYWRpZW50PgogICAgPC9kZWZzPgogICAgPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9IiNlZWUiIC8+CiAgICA8cmVjdCBpZD0iciIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjZykiIC8+CiAgICA8YW5pbWF0ZSB4bGluazpocmVmPSIjciIgYXR0cmlidXRlTmFtZT0ieCIgZnJvbT0iLTEwMCIgdG89IjEwMCIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiICAvPgogIDwvc3ZnPg=='/%3E%3C/svg%3E&quot;)" sizes="(min-width: 767px) 50vw, 100vw" srcSet="" src="https://images.unsplash.com/photo-1531538398863-7fc8db5d8f63?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80"></p></div></div></div></div><div class="rounded-xl mb-spacing24 last:mb-0 outline duration-300 transition ease-in-out outline-1 outline-neutral-200 hover:outline-neutral-400 hover:shadow-neutralShadow hidden"><div class="cursor-pointer items-center justify-between p-4 transition-all duration-500 undefined bg-white p-spacing16 pl-spacing24 flex gap-spacing8 rounded-xl"><div class="flex text-sm font-semibold items-center overflow-x-auto"><h3 class="text-neutral-800 font-bold text-sm leading-5.5 -indent-0 pl-5 overflow-hidden line-clamp-2">13. Explain lifecycle of react due to all to call to this.setState</h3></div><div class="md:w-5 md:h-5 w-6 h-6 ml-spacing8 flex items-center transition-all duration-300"><i class="icon-chevron-up-filled inline-block transition-transform duration-300 text-xl rotate-180 text-primary-main"></i></div></div><div class="overflow-hidden p-0 transition-all duration-500 ease-in-out rounded-b-xl" style="max-height:0px"><div><div class="p-spacing24 bg-white border-t border-neutral-200 faq-editor-content last:rounded-b-xl"><p>The component in which this.setState is called, is re-rendered including its child components. &nbsp;All of the lifecycle methods was already explained in Question 11 and Question 12. Below is the diagram for the same.</p><p><img alt=" lifecycle of react due" loading="lazy" width="100" height="100" decoding="async"  class="fr-fic fr-dib" style="color:transparent;width:100%;height:auto;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url(&quot;data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3C/filter%3E%3Cimage preserveAspectRatio='none' filter='url(%23b)' x='0' y='0' height='100%25' width='100%25' href='data:image/svg+xml;base64,CiAgPHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxkZWZzPgogICAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImciPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNjY2MiIG9mZnNldD0iMjAlIiAvPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNkZGQiIG9mZnNldD0iNTAlIiAvPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNlZWUiIG9mZnNldD0iNzAlIiAvPgogICAgICA8L2xpbmVhckdyYWRpZW50PgogICAgPC9kZWZzPgogICAgPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9IiNlZWUiIC8+CiAgICA8cmVjdCBpZD0iciIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjZykiIC8+CiAgICA8YW5pbWF0ZSB4bGluazpocmVmPSIjciIgYXR0cmlidXRlTmFtZT0ieCIgZnJvbT0iLTEwMCIgdG89IjEwMCIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiICAvPgogIDwvc3ZnPg=='/%3E%3C/svg%3E&quot;)" sizes="(min-width: 767px) 50vw, 100vw" srcSet="" src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80"></p></div></div></div></div><div class="rounded-xl mb-spacing24 last:mb-0 outline duration-300 transition ease-in-out outline-1 outline-neutral-200 hover:outline-neutral-400 hover:shadow-neutralShadow hidden"><div class="cursor-pointer items-center justify-between p-4 transition-all duration-500 undefined bg-white p-spacing16 pl-spacing24 flex gap-spacing8 rounded-xl"><div class="flex text-sm font-semibold items-center overflow-x-auto"><h3 class="text-neutral-800 font-bold text-sm leading-5.5 -indent-0 pl-5 overflow-hidden line-clamp-2">14. Explain the new lifecycle methods in React 16.3?</h3></div><div class="md:w-5 md:h-5 w-6 h-6 ml-spacing8 flex items-center transition-all duration-300"><i class="icon-chevron-up-filled inline-block transition-transform duration-300 text-xl rotate-180 text-primary-main"></i></div></div><div class="overflow-hidden p-0 transition-all duration-500 ease-in-out rounded-b-xl" style="max-height:0px"><div><div class="p-spacing24 bg-white border-t border-neutral-200 faq-editor-content last:rounded-b-xl"><p></p><p>There are two new lifecycle methods introduced in <em>React 16.3</em>. Their main task is replacing the old error-prone lifecycle methods like componentWillUpdate and componentWillReceiveProps. You can still use these old lifecycle methods in your project but only till React 17 is released. These old lifecycle methods are now called - UNSAFE_componentWillUpdate and UNSAFE_componentWillReceiveProps.</p><p><strong>static getDerivedStateFromProps(nextProps, prevState)</strong><br>This lifecycle method is invoked before calling render(), both on the initial mount and subsequent mounts. It’s main job is replacing <em>componentWillReceiveProps which is now called&nbsp;</em>UNSAFE_componentWillReceiveProps<em>.</em></p><p><strong>getSnapshotBeforeUpdate(prevProps, prevState)</strong><br>This lifecycle method is called right before the changes from VDOM are to be committed to the Real DOM. It enables your component to capture some information from the DOM like mouse position before it is changed. The returned value by this lifecycle will be passed as a parameter to <em>componentDidUpdate().</em></p><p>So, the new order of mounting is -</p><ul><li class="CertTheme__listItem pt-spacing10">constructor()</li><li class="CertTheme__listItem pt-spacing10">static getDerivedStateFromProps()</li><li class="CertTheme__listItem pt-spacing10">render()</li><li class="CertTheme__listItem pt-spacing10">componentDidMount()</li></ul><p>The order of update caused by changes in any props or state is -</p><ul><li class="CertTheme__listItem pt-spacing10">static getDerivedStateFromProps()</li><li class="CertTheme__listItem pt-spacing10">shouldComponentUpdate()</li><li class="CertTheme__listItem pt-spacing10">render()</li><li class="CertTheme__listItem pt-spacing10">getSnapshotBeforeUpdate()</li><li class="CertTheme__listItem pt-spacing10">componentDidUpdate()</li></ul><p></p></div></div></div></div><div class="rounded-xl mb-spacing24 last:mb-0 outline duration-300 transition ease-in-out outline-1 outline-neutral-200 hover:outline-neutral-400 hover:shadow-neutralShadow hidden"><div class="cursor-pointer items-center justify-between p-4 transition-all duration-500 undefined bg-white p-spacing16 pl-spacing24 flex gap-spacing8 rounded-xl"><div class="flex text-sm font-semibold items-center overflow-x-auto"><h3 class="text-neutral-800 font-bold text-sm leading-5.5 -indent-0 pl-5 overflow-hidden line-clamp-2">15. Explain the Error boundaries in React 16.3?</h3></div><div class="md:w-5 md:h-5 w-6 h-6 ml-spacing8 flex items-center transition-all duration-300"><i class="icon-chevron-up-filled inline-block transition-transform duration-300 text-xl rotate-180 text-primary-main"></i></div></div><div class="overflow-hidden p-0 transition-all duration-500 ease-in-out rounded-b-xl" style="max-height:0px"><div><div class="p-spacing24 bg-white border-t border-neutral-200 faq-editor-content last:rounded-b-xl"><p></p><p>Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed.</p><p>A class component becomes an error boundary if it defines either (or both) of the lifecycle methods static getDerivedStateFromError() or componentDidCatch(). Updating state from these lifecycles lets you capture an unhandled JavaScript error in the below tree and display a fallback UI.</p><p><span style="color:rgb(0, 0, 0)"><strong>static getDerivedStateFromError()</strong></span><br>This lifecycle is invoked after an error has been thrown by a component. It receives the error that was thrown as a parameter and should return a value to update state. <br><br><em>As it is called during the render phase so side-effects like this.setState are not allowed.</em></p><p><span style="color:rgb(0, 0, 0)"><strong>componentDidCatch()</strong></span><br>This lifecycle is invoked after an error has been thrown by a descendant component. It receives two parameters:</p><ul><li class="CertTheme__listItem pt-spacing10">error&nbsp;- The error that was thrown.</li><li class="CertTheme__listItem pt-spacing10">info&nbsp;- An object with a&nbsp;componentStack&nbsp;key containing information about the component which threw the error.</li></ul><p>As it is called during the commit phase so side-effects like this.setState are allowed.</p><p>Below is the example where we define a component called ErrorBoundary</p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-5g1gjjohz" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm">class ErrorBoundary extends React.Component {
&nbsp;constructor(props) {
&nbsp; &nbsp;super(props);
&nbsp; &nbsp;this.state = { hasError: false };
&nbsp;}
&nbsp;static getDerivedStateFromError(error) {
&nbsp; &nbsp;// Update state so the next render will show the fallback UI.
&nbsp; &nbsp;return { hasError: true };
&nbsp;}
&nbsp;componentDidCatch(error, info) {
&nbsp; &nbsp;logComponentStackToMyService(info.componentStack);
&nbsp;}
&nbsp;render() {
&nbsp; &nbsp;if (this.state.hasError) {
&nbsp; &nbsp; &nbsp;return &lt;h1&gt;Something went wrong.&lt;/h1&gt;;
&nbsp; &nbsp;}
&nbsp; &nbsp;return this.props.children;
&nbsp;}
}</pre></div></div><p>After this we need to wrap any component with it and try will work as the classic try..catch block.</p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-777jou4gc" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm">&lt;ErrorBoundary&gt;
&nbsp;&lt;ProductCard /&gt;
&lt;/ErrorBoundary&gt;</pre></div></div><p></p></div></div></div></div><div class="rounded-xl mb-spacing24 last:mb-0 outline duration-300 transition ease-in-out outline-1 outline-neutral-200 hover:outline-neutral-400 hover:shadow-neutralShadow hidden"><div class="cursor-pointer items-center justify-between p-4 transition-all duration-500 undefined bg-white p-spacing16 pl-spacing24 flex gap-spacing8 rounded-xl"><div class="flex text-sm font-semibold items-center overflow-x-auto"><h3 class="text-neutral-800 font-bold text-sm leading-5.5 -indent-0 pl-5 overflow-hidden line-clamp-2">16. Explain new Context API in React 16?</h3></div><div class="md:w-5 md:h-5 w-6 h-6 ml-spacing8 flex items-center transition-all duration-300"><i class="icon-chevron-up-filled inline-block transition-transform duration-300 text-xl rotate-180 text-primary-main"></i></div></div><div class="overflow-hidden p-0 transition-all duration-500 ease-in-out rounded-b-xl" style="max-height:0px"><div><div class="p-spacing24 bg-white border-t border-neutral-200 faq-editor-content last:rounded-b-xl"><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>In React Land, data is passed top-down from parent component to child component via props. But many times props are needed by a component, which is more than 10 levels deep. In such a scenario, the middle components are just passing the props. This unnecessary passing of props is an issue and is called prop drilling. This is where state management like Redux and Flux comes into the picture, which maintains one single central state.</span><br><br><span>But with Redux, the complexities of reducers and middleware also comes. It is good for a large application, but not for small or middle size applications.</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>Let’s first look into the example by passing props through an unnecessary component. We have a GrandFather component, which has a state called familyName. This is needed by the Child component. But we also have Father component in between, so we just pass familyName through it.</span></p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-danoq5m7i" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm"><span class="CertTheme__tokenAttr">class</span><span> </span><span class="CertTheme__tokenFunction">GrandFather</span><span> </span><span class="CertTheme__tokenAttr">extends</span><span> </span><span class="CertTheme__tokenFunction">React</span><span class="CertTheme__tokenPunctuation">.</span><span class="CertTheme__tokenFunction">Component</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span>&nbsp;state </span><span class="CertTheme__tokenOperator">=</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span>&nbsp; &nbsp;familyName</span><span class="CertTheme__tokenOperator">:</span><span> </span><span class="CertTheme__tokenSelector">"Das"</span><br><span>&nbsp;</span><span class="CertTheme__tokenPunctuation">}</span><br><span>&nbsp;</span><span class="CertTheme__tokenFunction">render</span><span class="CertTheme__tokenPunctuation">(</span><span class="CertTheme__tokenPunctuation">)</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span>&nbsp; &nbsp;</span><span class="CertTheme__tokenAttr">return</span><span> </span><span class="CertTheme__tokenOperator">&lt;</span><span>Father familyName</span><span class="CertTheme__tokenOperator">=</span><span class="CertTheme__tokenPunctuation">{</span><span class="CertTheme__tokenAttr">this</span><span class="CertTheme__tokenPunctuation">.</span><span>state</span><span class="CertTheme__tokenPunctuation">.</span><span>familyName</span><span class="CertTheme__tokenPunctuation">}</span><span> </span><span class="CertTheme__tokenOperator">/</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp;</span><span class="CertTheme__tokenPunctuation">}</span><br><span class="CertTheme__tokenPunctuation">}</span><br><span class="CertTheme__tokenAttr">const</span><span> </span><span>Father</span><span> </span><span class="CertTheme__tokenOperator">=</span><span> </span><span class="CertTheme__tokenPunctuation">(</span><span class="CertTheme__tokenPunctuation">{</span><span> familyName</span><span class="CertTheme__tokenPunctuation">}</span><span class="CertTheme__tokenPunctuation">)</span><span> </span><span class="CertTheme__tokenOperator">=&gt;</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span>&nbsp;</span><span class="CertTheme__tokenAttr">return</span><span> </span><span class="CertTheme__tokenOperator">&lt;</span><span>Child familyName</span><span class="CertTheme__tokenOperator">=</span><span class="CertTheme__tokenPunctuation">{</span><span>familyName</span><span class="CertTheme__tokenPunctuation">}</span><span> </span><span class="CertTheme__tokenOperator">/</span><span class="CertTheme__tokenOperator">&gt;</span><br><span class="CertTheme__tokenPunctuation">}</span><br><span class="CertTheme__tokenAttr">const</span><span> </span><span>Child</span><span> </span><span class="CertTheme__tokenOperator">=</span><span> </span><span class="CertTheme__tokenPunctuation">(</span><span class="CertTheme__tokenPunctuation">{</span><span> familyName </span><span class="CertTheme__tokenPunctuation">}</span><span class="CertTheme__tokenPunctuation">)</span><span> </span><span class="CertTheme__tokenOperator">=&gt;</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span>&nbsp;</span><span class="CertTheme__tokenAttr">return</span><span> </span><span class="CertTheme__tokenOperator">&lt;</span><span>p</span><span class="CertTheme__tokenOperator">&gt;</span><span class="CertTheme__tokenPunctuation">{</span><span>familyName</span><span class="CertTheme__tokenPunctuation">}</span><span class="CertTheme__tokenOperator">&lt;</span><span class="CertTheme__tokenOperator">/</span><span>p</span><span class="CertTheme__tokenOperator">&gt;</span><br><span class="CertTheme__tokenPunctuation">}</span></pre></div></div><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>We can refactor the above to use the new Context API. Using Context means we don’t need to pass the familyName unnecessary through the &lt;Father /&gt; component. Here first we create our FamilyContext by React.createContext()</span></p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-2u9ula6oo" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm"><span class="CertTheme__tokenAttr">const</span><span> FamilyContext </span><span class="CertTheme__tokenOperator">=</span><span> React</span><span class="CertTheme__tokenPunctuation">.</span><span class="CertTheme__tokenFunction">createContext</span><span class="CertTheme__tokenPunctuation">(</span><span class="CertTheme__tokenPunctuation">{</span><span class="CertTheme__tokenPunctuation">}</span><span class="CertTheme__tokenPunctuation">)</span><span class="CertTheme__tokenPunctuation">;</span><br><span class="CertTheme__tokenAttr">class</span><span> </span><span class="CertTheme__tokenFunction">GrandFather</span><span> </span><span class="CertTheme__tokenAttr">extends</span><span> </span><span class="CertTheme__tokenFunction">React</span><span class="CertTheme__tokenPunctuation">.</span><span class="CertTheme__tokenFunction">Component</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span>&nbsp;state </span><span class="CertTheme__tokenOperator">=</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span>&nbsp; &nbsp;familyName</span><span class="CertTheme__tokenOperator">:</span><span> </span><span class="CertTheme__tokenSelector">"Das"</span><br><span>&nbsp;</span><span class="CertTheme__tokenPunctuation">}</span><span class="CertTheme__tokenPunctuation">;</span><br><span class="CertTheme__tokenFunction">render</span><span class="CertTheme__tokenPunctuation">(</span><span class="CertTheme__tokenPunctuation">)</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span>&nbsp; &nbsp;</span><span class="CertTheme__tokenAttr">return</span><span> </span><span class="CertTheme__tokenPunctuation">(</span><br><span>&nbsp; &nbsp; &nbsp;</span><span class="CertTheme__tokenOperator">&lt;</span><span>FamilyContext</span><span class="CertTheme__tokenPunctuation">.</span><span>Provider value</span><span class="CertTheme__tokenOperator">=</span><span class="CertTheme__tokenPunctuation">{</span><span class="CertTheme__tokenAttr">this</span><span class="CertTheme__tokenPunctuation">.</span><span>state</span><span class="CertTheme__tokenPunctuation">.</span><span>familyName</span><span class="CertTheme__tokenPunctuation">}</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="CertTheme__tokenOperator">&lt;</span><span>Father </span><span class="CertTheme__tokenOperator">/</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp; &nbsp; &nbsp;</span><span class="CertTheme__tokenOperator">&lt;</span><span class="CertTheme__tokenOperator">/</span><span>FamilyContext</span><span class="CertTheme__tokenPunctuation">.</span><span>Provider</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp; &nbsp;</span><span class="CertTheme__tokenPunctuation">)</span><span class="CertTheme__tokenPunctuation">;</span><br><span>&nbsp;</span><span class="CertTheme__tokenPunctuation">}</span><br><span class="CertTheme__tokenPunctuation">}</span><br><span class="CertTheme__tokenAttr">const</span><span> </span><span>Father</span><span> </span><span class="CertTheme__tokenOperator">=</span><span> </span><span class="CertTheme__tokenPunctuation">(</span><span class="CertTheme__tokenPunctuation">)</span><span> </span><span class="CertTheme__tokenOperator">=&gt;</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span>&nbsp;</span><span class="CertTheme__tokenAttr">return</span><span> </span><span class="CertTheme__tokenOperator">&lt;</span><span>Child </span><span class="CertTheme__tokenOperator">/</span><span class="CertTheme__tokenOperator">&gt;</span><span class="CertTheme__tokenPunctuation">;</span><br><span class="CertTheme__tokenPunctuation">}</span><span class="CertTheme__tokenPunctuation">;</span><br><span class="CertTheme__tokenAttr">const</span><span> </span><span>Child</span><span> </span><span class="CertTheme__tokenOperator">=</span><span> </span><span class="CertTheme__tokenPunctuation">(</span><span class="CertTheme__tokenPunctuation">)</span><span> </span><span class="CertTheme__tokenOperator">=&gt;</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span>&nbsp;</span><span class="CertTheme__tokenAttr">return</span><span> </span><span class="CertTheme__tokenOperator">&lt;</span><span>FamilyContext</span><span class="CertTheme__tokenPunctuation">.</span><span>Consumer</span><span class="CertTheme__tokenOperator">&gt;</span><span class="CertTheme__tokenPunctuation">{</span><span>context</span><span> </span><span class="CertTheme__tokenOperator">=&gt;</span><span> </span><span class="CertTheme__tokenOperator">&lt;</span><span>p</span><span class="CertTheme__tokenOperator">&gt;</span><span class="CertTheme__tokenPunctuation">{</span><span>context</span><span class="CertTheme__tokenPunctuation">}</span><span class="CertTheme__tokenOperator">&lt;</span><span class="CertTheme__tokenOperator">/</span><span>p</span><span class="CertTheme__tokenOperator">&gt;</span><span class="CertTheme__tokenPunctuation">}</span><br><span class="CertTheme__tokenOperator">&lt;</span><span class="CertTheme__tokenOperator">/</span><span>FamilyContext</span><span class="CertTheme__tokenPunctuation">.</span><span>Consumer</span><span class="CertTheme__tokenOperator">&gt;</span><span class="CertTheme__tokenPunctuation">;</span><br><span class="CertTheme__tokenPunctuation">}</span><span class="CertTheme__tokenPunctuation">;</span><br><span>ReactDOM</span><span class="CertTheme__tokenPunctuation">.</span><span class="CertTheme__tokenFunction">render</span><span class="CertTheme__tokenPunctuation">(</span><span class="CertTheme__tokenOperator">&lt;</span><span>GrandFather </span><span class="CertTheme__tokenOperator">/</span><span class="CertTheme__tokenOperator">&gt;</span><span class="CertTheme__tokenPunctuation">,</span><span> document</span><span class="CertTheme__tokenPunctuation">.</span><span class="CertTheme__tokenFunction">querySelector</span><span class="CertTheme__tokenPunctuation">(</span><span class="CertTheme__tokenSelector">"#app"</span><span class="CertTheme__tokenPunctuation">)</span><span class="CertTheme__tokenPunctuation">)</span></pre></div></div><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>Now, we will wrap the &lt;Father /&gt; component with &lt;FamilyContext.Provider /&gt; as it contains &lt;Child /&gt;.Notice that the Provider has a value prop. Pass in whatever state you’d like to share to any Component deep down.</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>To have access to the familyName, we have also wrapped the &lt;p&gt; tag in the &lt;FamilyContext.Consumer /&gt; component so that it has access to the context.</span></p></div></div></div></div><div class="rounded-xl mb-spacing24 last:mb-0 outline duration-300 transition ease-in-out outline-1 outline-neutral-200 hover:outline-neutral-400 hover:shadow-neutralShadow hidden"><div class="cursor-pointer items-center justify-between p-4 transition-all duration-500 undefined bg-white p-spacing16 pl-spacing24 flex gap-spacing8 rounded-xl"><div class="flex text-sm font-semibold items-center overflow-x-auto"><h3 class="text-neutral-800 font-bold text-sm leading-5.5 -indent-0 pl-5 overflow-hidden line-clamp-2">17. What are Pure Components in React?</h3></div><div class="md:w-5 md:h-5 w-6 h-6 ml-spacing8 flex items-center transition-all duration-300"><i class="icon-chevron-up-filled inline-block transition-transform duration-300 text-xl rotate-180 text-primary-main"></i></div></div><div class="overflow-hidden p-0 transition-all duration-500 ease-in-out rounded-b-xl" style="max-height:0px"><div><div class="p-spacing24 bg-white border-t border-neutral-200 faq-editor-content last:rounded-b-xl"><p></p><p>Pure Component are special type of Components in React, which doesn’t re-render itself if the state is not changed. In ReactJS if we do a this.setState, it re-renders the Component and it’s child components.</p><p>Consider the below example. The initial state <strong>value&nbsp;</strong>is 1. It has a “componentDidMount” by which we are simulating AJAX call by running a setInterval, every 2 seconds. It has a <strong>this.setState</strong>, but sets the value again to 1. But because this.setState runs, it re-render the component.</p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-lk15ihos8" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm">import React from ‘react’;
class PureDemo extends React.Component {
&nbsp;constructor(props) {
&nbsp; &nbsp;super(props)
&nbsp; &nbsp;this.state={
&nbsp; &nbsp; value: 1
&nbsp; &nbsp;}
&nbsp;}
<strong>&nbsp; componentDidMount() {</strong>
<strong>&nbsp; &nbsp;setInterval(() =&gt; {</strong>
<strong>&nbsp; &nbsp; &nbsp;this.setState({ value: 1})</strong>
<strong>&nbsp; &nbsp; }, 2000)</strong>
<strong>&nbsp; }&nbsp;</strong>&nbsp;
&nbsp;render() {
&nbsp;console.log('Render PureDemo');
&nbsp; &nbsp;return (
&nbsp; &nbsp; &nbsp;&lt;Demo value={this.state.value} /&gt;
&nbsp; &nbsp;)
&nbsp;}
}
const Demo = (props) =&gt; {
&nbsp;console.log('Render Demo');
return &lt;div&gt;{props.val}&lt;/div&gt;
}
ReactDOM.render(&lt;PureDemo /&gt;, document.querySelector("#app"))</pre></div></div><p>If we run the below, both components will be rendered after every 2 seconds and we will get the below printed in the console.</p><p><img alt="Pure Components in React" loading="lazy" width="100" height="100" decoding="async"  class="fr-fic fr-dib" style="color:transparent;width:100%;height:auto;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url(&quot;data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3C/filter%3E%3Cimage preserveAspectRatio='none' filter='url(%23b)' x='0' y='0' height='100%25' width='100%25' href='data:image/svg+xml;base64,CiAgPHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxkZWZzPgogICAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImciPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNjY2MiIG9mZnNldD0iMjAlIiAvPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNkZGQiIG9mZnNldD0iNTAlIiAvPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNlZWUiIG9mZnNldD0iNzAlIiAvPgogICAgICA8L2xpbmVhckdyYWRpZW50PgogICAgPC9kZWZzPgogICAgPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9IiNlZWUiIC8+CiAgICA8cmVjdCBpZD0iciIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjZykiIC8+CiAgICA8YW5pbWF0ZSB4bGluazpocmVmPSIjciIgYXR0cmlidXRlTmFtZT0ieCIgZnJvbT0iLTEwMCIgdG89IjEwMCIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiICAvPgogIDwvc3ZnPg=='/%3E%3C/svg%3E&quot;)" sizes="(min-width: 767px) 50vw, 100vw" srcSet="" src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80"></p><p>Now, we can solve this issue of not rendering components if state is not changed, by using lifecycle hook shouldComponentUpdate. It will run in each render and here we are checking if the current state is equal to the next state. If they are equal, we are returning false and the components will not re-render.</p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-pyxcg7mvj" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm">class PureDemo extends React.Component {
&nbsp;constructor(props) {
&nbsp; &nbsp;super(props)
&nbsp; &nbsp;this.state={
&nbsp; &nbsp; value: 1
&nbsp; &nbsp;}
&nbsp;}
&nbsp;componentDidMount() {
&nbsp; setInterval(() =&gt; {
&nbsp; &nbsp; this.setState({ value: 1})
&nbsp; &nbsp;}, 2000)
&nbsp;}
<strong>&nbsp;shouldComponentUpdate(nextProp, nextState) {</strong>
<strong>&nbsp; &nbsp; return (this.state.value === nextState.value ? false : true )</strong>
<strong>&nbsp; }&nbsp;</strong>
&nbsp;render() {
&nbsp;console.log('Render PureDemo');
&nbsp; &nbsp;return (
&nbsp; &nbsp; &nbsp;&lt;Demo value={this.state.value} /&gt;
&nbsp; &nbsp;)
&nbsp;}
}
const Demo = (props) =&gt; {
&nbsp;console.log('Render Demo');
return &lt;div&gt;{props.value}&lt;/div&gt;
}
ReactDOM.render(&lt;PureDemo /&gt;, document.querySelector("#app"))</pre></div></div><p>The same thing can be achieved by using Pure Components, instead of a normal component. It will behave similarly to the above code with shouldComponentUpdate.</p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-6f7a5x9kh" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm"><strong>class PureDemo extends React.PureComponent {</strong>
&nbsp;constructor(props) {
&nbsp; &nbsp;super(props)
&nbsp; &nbsp;this.state={
&nbsp; &nbsp; value: 1
&nbsp; &nbsp;}
&nbsp;}
&nbsp;componentDidMount() {
&nbsp; setInterval(() =&gt; {
&nbsp; &nbsp; this.setState({ value: 1})
&nbsp; &nbsp;}, 2000)
&nbsp;}
&nbsp;render() {
&nbsp;console.log('Render PureDemo');
&nbsp; &nbsp;return (
&nbsp; &nbsp; &nbsp;&lt;Demo val={this.state.value} /&gt;
&nbsp; &nbsp;)
&nbsp;}
}
const Demo = (props) =&gt; {
&nbsp;console.log('Render Demo');
return &lt;div&gt;{props.value}&lt;/div&gt;
}
ReactDOM.render(&lt;PureDemo /&gt;, document.querySelector(“#app"))</pre></div></div><p></p></div></div></div></div><div class="rounded-xl mb-spacing24 last:mb-0 outline duration-300 transition ease-in-out outline-1 outline-neutral-200 hover:outline-neutral-400 hover:shadow-neutralShadow hidden"><div class="cursor-pointer items-center justify-between p-4 transition-all duration-500 undefined bg-white p-spacing16 pl-spacing24 flex gap-spacing8 rounded-xl"><div class="flex text-sm font-semibold items-center overflow-x-auto"><h3 class="text-neutral-800 font-bold text-sm leading-5.5 -indent-0 pl-5 overflow-hidden line-clamp-2">18. What are Higher Order Components in React?</h3></div><div class="md:w-5 md:h-5 w-6 h-6 ml-spacing8 flex items-center transition-all duration-300"><i class="icon-chevron-up-filled inline-block transition-transform duration-300 text-xl rotate-180 text-primary-main"></i></div></div><div class="overflow-hidden p-0 transition-all duration-500 ease-in-out rounded-b-xl" style="max-height:0px"><div><div class="p-spacing24 bg-white border-t border-neutral-200 faq-editor-content last:rounded-b-xl"><p class="CertTheme__paragraph" data-mode="standard"><br></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><i><b><strong class="CertTheme__textBold CertTheme__textItalic">A must-know for anyone heading into a React interview, this question is frequently asked in React interview questions.</strong></b></i></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>In vanilla JavaScript, we have the concept of Higher Order Functions, in which we pass a function to another function as an argument. In React Land higher-order Components are very similar to that, and in it, we pass a Component as an argument to other Component, which can also add some functionalities to it.</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>Let’s first consider the below example without Higher-Order Components. Here we are having a ButtonStyled component, which has two of stylee. If we pass the props “disable”, then the </span><i><em class="CertTheme__textItalic">background-color</em></i><span> and </span><i><em class="CertTheme__textItalic">color</em></i><span> are different. You can find the JSFiddle below.</span></p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-g28l7i41c" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm"><span class="CertTheme__tokenAttr">const</span><span> styles </span><span class="CertTheme__tokenOperator">=</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span>&nbsp; &nbsp;</span><span class="CertTheme__tokenAttr">default</span><span> </span><span class="CertTheme__tokenOperator">:</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span>&nbsp; &nbsp; &nbsp; &nbsp;backgroundColor</span><span class="CertTheme__tokenOperator">:</span><span> </span><span class="CertTheme__tokenSelector">'#737373'</span><span class="CertTheme__tokenPunctuation">,</span><br><span>&nbsp; &nbsp; &nbsp; &nbsp;color</span><span class="CertTheme__tokenOperator">:</span><span> </span><span class="CertTheme__tokenSelector">'#eae8e8'</span><span class="CertTheme__tokenPunctuation">,</span><br><span>&nbsp; &nbsp; &nbsp; &nbsp;padding</span><span class="CertTheme__tokenOperator">:</span><span> </span><span class="CertTheme__tokenSelector">'10px'</span><br><span>&nbsp; &nbsp;</span><span class="CertTheme__tokenPunctuation">}</span><span class="CertTheme__tokenPunctuation">,</span><span> </span><span>disable</span><span> </span><span class="CertTheme__tokenOperator">:</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span>&nbsp; &nbsp; &nbsp; &nbsp;backgroundColor</span><span class="CertTheme__tokenOperator">:</span><span> </span><span class="CertTheme__tokenSelector">'#9c9c9c'</span><span class="CertTheme__tokenPunctuation">,</span><br><span>&nbsp; &nbsp; &nbsp; &nbsp;color</span><span class="CertTheme__tokenOperator">:</span><span> </span><span class="CertTheme__tokenSelector">'#c7c6c6'</span><span class="CertTheme__tokenPunctuation">,</span><br><span>&nbsp;</span><span class="CertTheme__tokenPunctuation">}</span><br><span class="CertTheme__tokenPunctuation">}</span><br><span class="CertTheme__tokenAttr">class</span><span> </span><span class="CertTheme__tokenFunction">WithoutHOCdemo</span><span> </span><span class="CertTheme__tokenAttr">extends</span><span> </span><span class="CertTheme__tokenFunction">React</span><span class="CertTheme__tokenPunctuation">.</span><span class="CertTheme__tokenFunction">Component</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><span> &nbsp;</span><br><span>&nbsp;</span><span class="CertTheme__tokenFunction">render</span><span class="CertTheme__tokenPunctuation">(</span><span class="CertTheme__tokenPunctuation">)</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span>&nbsp; &nbsp;</span><span class="CertTheme__tokenAttr">return</span><span> </span><span class="CertTheme__tokenPunctuation">(</span><br><span>&nbsp; &nbsp; &nbsp;</span><span class="CertTheme__tokenOperator">&lt;</span><span>div</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="CertTheme__tokenOperator">&lt;</span><span>ButtonStyled </span><span class="CertTheme__tokenOperator">/</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="CertTheme__tokenOperator">&lt;</span><span>ButtonStyled disable </span><span class="CertTheme__tokenOperator">/</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp; &nbsp; &nbsp;</span><span class="CertTheme__tokenOperator">&lt;</span><span class="CertTheme__tokenOperator">/</span><span>div</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp; &nbsp;</span><span class="CertTheme__tokenPunctuation">)</span><br><span>&nbsp;</span><span class="CertTheme__tokenPunctuation">}</span><br><span class="CertTheme__tokenPunctuation">}</span><br><span class="CertTheme__tokenAttr">const</span><span> </span><span>ButtonStyled</span><span> </span><span class="CertTheme__tokenOperator">=</span><span> </span><span class="CertTheme__tokenPunctuation">(</span><span>props</span><span class="CertTheme__tokenPunctuation">)</span><span> </span><span class="CertTheme__tokenOperator">=&gt;</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span class="CertTheme__tokenAttr">let</span><span> _styles </span><span class="CertTheme__tokenOperator">=</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><span class="CertTheme__tokenOperator">...</span><span>styles</span><span class="CertTheme__tokenPunctuation">.</span><span>default</span><span class="CertTheme__tokenPunctuation">}</span><span class="CertTheme__tokenPunctuation">;</span><br><span>&nbsp;</span><span class="CertTheme__tokenAttr">if</span><span class="CertTheme__tokenPunctuation">(</span><span>props</span><span class="CertTheme__tokenPunctuation">.</span><span>disable</span><span class="CertTheme__tokenPunctuation">)</span><br><span>&nbsp; _styles </span><span class="CertTheme__tokenOperator">=</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><span class="CertTheme__tokenOperator">...</span><span>_styles</span><span class="CertTheme__tokenPunctuation">,</span><span> </span><span class="CertTheme__tokenOperator">...</span><span>styles</span><span class="CertTheme__tokenPunctuation">.</span><span>disable</span><span class="CertTheme__tokenPunctuation">}</span><br><span class="CertTheme__tokenAttr">return</span><span> </span><span class="CertTheme__tokenOperator">&lt;</span><span>button style</span><span class="CertTheme__tokenOperator">=</span><span class="CertTheme__tokenPunctuation">{</span><span>_styles</span><span class="CertTheme__tokenPunctuation">}</span><span class="CertTheme__tokenOperator">&gt;</span><span>Button Styled</span><span class="CertTheme__tokenOperator">&lt;</span><span class="CertTheme__tokenOperator">/</span><span>button</span><span class="CertTheme__tokenOperator">&gt;</span><br><span class="CertTheme__tokenPunctuation">}</span><br><span>ReactDOM</span><span class="CertTheme__tokenPunctuation">.</span><span class="CertTheme__tokenFunction">render</span><span class="CertTheme__tokenPunctuation">(</span><span class="CertTheme__tokenOperator">&lt;</span><span>WithoutHOCdemo </span><span class="CertTheme__tokenOperator">/</span><span class="CertTheme__tokenOperator">&gt;</span><span class="CertTheme__tokenPunctuation">,</span><span> document</span><span class="CertTheme__tokenPunctuation">.</span><span class="CertTheme__tokenFunction">querySelector</span><span class="CertTheme__tokenPunctuation">(</span><span class="CertTheme__tokenSelector">"#app"</span><span class="CertTheme__tokenPunctuation">)</span><span class="CertTheme__tokenPunctuation">)</span></pre></div></div><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>We will now be changing it to use Higher Order Components- styledWrapper, we will move all logic of style changes from ButtonStyled component to a HOC. So, now our ButtonStyled component looks like below. At the last line, we export the styledWrapper wrapping our current component.</span></p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-r6ejvvdn5" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm"><span class="CertTheme__tokenAttr">import</span><span> React from ‘react’</span><span class="CertTheme__tokenPunctuation">;</span><br><span class="CertTheme__tokenAttr">import</span><span> styledWrapper from ‘</span><span class="CertTheme__tokenPunctuation">.</span><span class="CertTheme__tokenOperator">/</span><span class="CertTheme__tokenPunctuation">.</span><span class="CertTheme__tokenPunctuation">.</span><span class="CertTheme__tokenOperator">/</span><span class="CertTheme__tokenProperty">HOC</span><span class="CertTheme__tokenOperator">/</span><span>styledWrapper'</span><span class="CertTheme__tokenPunctuation">;</span><br><span class="CertTheme__tokenAttr">const</span><span> </span><span>ButtonStyled</span><span> </span><span class="CertTheme__tokenOperator">=</span><span> </span><span class="CertTheme__tokenPunctuation">(</span><span>props</span><span class="CertTheme__tokenPunctuation">)</span><span> </span><span class="CertTheme__tokenOperator">=&gt;</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span>&nbsp; &nbsp;</span><span class="CertTheme__tokenAttr">return</span><span> </span><span class="CertTheme__tokenPunctuation">(</span><span class="CertTheme__tokenOperator">&lt;</span><span>button style</span><span class="CertTheme__tokenOperator">=</span><span class="CertTheme__tokenPunctuation">{</span><span>props</span><span class="CertTheme__tokenPunctuation">.</span><span>styles</span><span class="CertTheme__tokenPunctuation">}</span><span class="CertTheme__tokenOperator">&gt;</span><span>ButtonStyled</span><span class="CertTheme__tokenOperator">&lt;</span><span class="CertTheme__tokenOperator">/</span><span>button</span><span class="CertTheme__tokenOperator">&gt;</span><span class="CertTheme__tokenPunctuation">)</span><br><span class="CertTheme__tokenPunctuation">}</span></pre></div></div><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>export default styledWrapper(ButtonStyled);</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>The Higher Order Component styledWrapper will be like below. In the last part, we take the WrapComponent which is ButtonStyled and return it with translatedProps, which will also get the props passed.</span></p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-cam4cyzyn" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm"><span class="CertTheme__tokenAttr">import</span><span> React from ‘react’</span><span class="CertTheme__tokenPunctuation">;</span><br><span class="CertTheme__tokenAttr">const</span><span> styles </span><span class="CertTheme__tokenOperator">=</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span>&nbsp; &nbsp;</span><span class="CertTheme__tokenAttr">default</span><span> </span><span class="CertTheme__tokenOperator">:</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span>&nbsp; &nbsp; &nbsp; &nbsp;backgroundColor</span><span class="CertTheme__tokenOperator">:</span><span> </span><span class="CertTheme__tokenSelector">'#737373'</span><span class="CertTheme__tokenPunctuation">,</span><br><span>&nbsp; &nbsp; &nbsp; &nbsp;color</span><span class="CertTheme__tokenOperator">:</span><span> </span><span class="CertTheme__tokenSelector">'#eae8e8'</span><span class="CertTheme__tokenPunctuation">,</span><br><span>&nbsp; &nbsp; &nbsp; &nbsp;padding</span><span class="CertTheme__tokenOperator">:</span><span> </span><span class="CertTheme__tokenSelector">'10px'</span><br><span>&nbsp; &nbsp;</span><span class="CertTheme__tokenPunctuation">}</span><span class="CertTheme__tokenPunctuation">,</span><span> </span><span>disable</span><span> </span><span class="CertTheme__tokenOperator">:</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span>&nbsp; &nbsp; &nbsp; &nbsp;backgroundColor</span><span class="CertTheme__tokenOperator">:</span><span> </span><span class="CertTheme__tokenSelector">'#9c9c9c'</span><span class="CertTheme__tokenPunctuation">,</span><br><span>&nbsp; &nbsp; &nbsp; &nbsp;color</span><span class="CertTheme__tokenOperator">:</span><span> </span><span class="CertTheme__tokenSelector">'#c7c6c6'</span><span class="CertTheme__tokenPunctuation">,</span><br><span>&nbsp; &nbsp;</span><span class="CertTheme__tokenPunctuation">}</span><br><span class="CertTheme__tokenPunctuation">}</span><br><span class="CertTheme__tokenAttr">const</span><span> </span><span>translatedProps</span><span> </span><span class="CertTheme__tokenOperator">=</span><span> </span><span class="CertTheme__tokenPunctuation">(</span><span>props</span><span class="CertTheme__tokenPunctuation">)</span><span> </span><span class="CertTheme__tokenOperator">=&gt;</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span>&nbsp; &nbsp;</span><span class="CertTheme__tokenAttr">let</span><span> _styles </span><span class="CertTheme__tokenOperator">=</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><span class="CertTheme__tokenOperator">...</span><span>styles</span><span class="CertTheme__tokenPunctuation">.</span><span>default</span><span class="CertTheme__tokenPunctuation">}</span><br><span>&nbsp; &nbsp;</span><span class="CertTheme__tokenAttr">if</span><span class="CertTheme__tokenPunctuation">(</span><span>props</span><span class="CertTheme__tokenPunctuation">.</span><span>disable</span><span class="CertTheme__tokenPunctuation">)</span><span class="CertTheme__tokenPunctuation">{</span><br><span>&nbsp; &nbsp; &nbsp; &nbsp;_styles </span><span class="CertTheme__tokenOperator">=</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><span class="CertTheme__tokenOperator">...</span><span>_styles</span><span class="CertTheme__tokenPunctuation">,</span><span> </span><span class="CertTheme__tokenOperator">...</span><span>styles</span><span class="CertTheme__tokenPunctuation">.</span><span>disable</span><span class="CertTheme__tokenPunctuation">}</span><span class="CertTheme__tokenPunctuation">;</span><span> &nbsp;</span><br><span>&nbsp; &nbsp;</span><span class="CertTheme__tokenPunctuation">}</span><br><span>&nbsp; &nbsp;</span><span class="CertTheme__tokenAttr">const</span><span> newProps </span><span class="CertTheme__tokenOperator">=</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><span class="CertTheme__tokenOperator">...</span><span>props</span><span class="CertTheme__tokenPunctuation">,</span><span> </span><span>styles</span><span class="CertTheme__tokenOperator">:</span><span>_styles </span><span class="CertTheme__tokenPunctuation">}</span><br><span>&nbsp; &nbsp;</span><span class="CertTheme__tokenAttr">return</span><span> newProps</span><span class="CertTheme__tokenPunctuation">;</span><br><span class="CertTheme__tokenPunctuation">}</span><br><span class="CertTheme__tokenAttr">export</span><span> </span><span class="CertTheme__tokenAttr">default</span><span> </span><span class="CertTheme__tokenPunctuation">(</span><span>WrapComponent</span><span class="CertTheme__tokenPunctuation">)</span><span> </span><span class="CertTheme__tokenOperator">=&gt;</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span>&nbsp; &nbsp; </span><span class="CertTheme__tokenAttr">return</span><span> </span><span class="CertTheme__tokenAttr">function</span><span> </span><span class="CertTheme__tokenFunction">wrappedRender</span><span class="CertTheme__tokenPunctuation">(</span><span>args</span><span class="CertTheme__tokenPunctuation">)</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span>&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="CertTheme__tokenAttr">return</span><span> </span><span class="CertTheme__tokenFunction">WrapComponent</span><span class="CertTheme__tokenPunctuation">(</span><span class="CertTheme__tokenFunction">translatedProps</span><span class="CertTheme__tokenPunctuation">(</span><span>args</span><span class="CertTheme__tokenPunctuation">)</span><span class="CertTheme__tokenPunctuation">)</span><span class="CertTheme__tokenPunctuation">;</span><br><span>&nbsp; &nbsp; </span><span class="CertTheme__tokenPunctuation">}</span><br><span class="CertTheme__tokenPunctuation">}</span></pre></div></div><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><br></p></div></div></div></div><div class="rounded-xl mb-spacing24 last:mb-0 outline duration-300 transition ease-in-out outline-1 outline-neutral-200 hover:outline-neutral-400 hover:shadow-neutralShadow hidden"><div class="cursor-pointer items-center justify-between p-4 transition-all duration-500 undefined bg-white p-spacing16 pl-spacing24 flex gap-spacing8 rounded-xl"><div class="flex text-sm font-semibold items-center overflow-x-auto"><h3 class="text-neutral-800 font-bold text-sm leading-5.5 -indent-0 pl-5 overflow-hidden line-clamp-2">19. How to pass data between sibling components using React router?</h3></div><div class="md:w-5 md:h-5 w-6 h-6 ml-spacing8 flex items-center transition-all duration-300"><i class="icon-chevron-up-filled inline-block transition-transform duration-300 text-xl rotate-180 text-primary-main"></i></div></div><div class="overflow-hidden p-0 transition-all duration-500 ease-in-out rounded-b-xl" style="max-height:0px"><div><div class="p-spacing24 bg-white border-t border-neutral-200 faq-editor-content last:rounded-b-xl"><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>We can pass data between React sibling components using React Router using history.push and match.params.</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>Let look into the code. We have a Parent component App.js. We have two Child Components HomePage and AboutPage. Everything is inside a Router from React-router Route. We also have a route for /about/{params}. This is where we will pass the data.</span></p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-5kuc46i3h" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm"><span class="CertTheme__tokenAttr">import</span><span> React</span><span class="CertTheme__tokenPunctuation">,</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><span> Component </span><span class="CertTheme__tokenPunctuation">}</span><span> from ‘react’</span><span class="CertTheme__tokenPunctuation">;</span><br><span class="CertTheme__tokenAttr">class</span><span> </span><span class="CertTheme__tokenFunction">App</span><span> </span><span class="CertTheme__tokenAttr">extends</span><span> </span><span class="CertTheme__tokenFunction">Component</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span class="CertTheme__tokenFunction">render</span><span class="CertTheme__tokenPunctuation">(</span><span class="CertTheme__tokenPunctuation">)</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span>&nbsp; &nbsp;</span><span class="CertTheme__tokenAttr">return</span><span> </span><span class="CertTheme__tokenPunctuation">(</span><br><span>&nbsp; &nbsp; &nbsp;</span><span class="CertTheme__tokenOperator">&lt;</span><span>Router</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="CertTheme__tokenOperator">&lt;</span><span>div className</span><span class="CertTheme__tokenOperator">=</span><span class="CertTheme__tokenSelector">"App"</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="CertTheme__tokenOperator">&lt;</span><span>ul</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="CertTheme__tokenOperator">&lt;</span><span>li</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="CertTheme__tokenOperator">&lt;</span><span>NavLink to</span><span class="CertTheme__tokenOperator">=</span><span class="CertTheme__tokenSelector">"/"</span><span> &nbsp;activeStyle</span><span class="CertTheme__tokenOperator">=</span><span class="CertTheme__tokenPunctuation">{</span><span class="CertTheme__tokenPunctuation">{</span><span> </span><span>color</span><span class="CertTheme__tokenOperator">:</span><span class="CertTheme__tokenSelector">'green'</span><span> </span><span class="CertTheme__tokenPunctuation">}</span><span class="CertTheme__tokenPunctuation">}</span><span class="CertTheme__tokenOperator">&gt;</span><span>Home</span><span class="CertTheme__tokenOperator">&lt;</span><span class="CertTheme__tokenOperator">/</span><span>NavLink</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="CertTheme__tokenOperator">&lt;</span><span class="CertTheme__tokenOperator">/</span><span>li</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="CertTheme__tokenOperator">&lt;</span><span>li</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="CertTheme__tokenOperator">&lt;</span><span>NavLink to</span><span class="CertTheme__tokenOperator">=</span><span class="CertTheme__tokenSelector">"/about"</span><span> &nbsp;activeStyle</span><span class="CertTheme__tokenOperator">=</span><span class="CertTheme__tokenPunctuation">{</span><span class="CertTheme__tokenPunctuation">{</span><span> </span><span>color</span><span class="CertTheme__tokenOperator">:</span><span class="CertTheme__tokenSelector">'green'</span><span> </span><span class="CertTheme__tokenPunctuation">}</span><span class="CertTheme__tokenPunctuation">}</span><span class="CertTheme__tokenOperator">&gt;</span><span>About</span><br><span>&nbsp; </span><span class="CertTheme__tokenOperator">&lt;</span><span class="CertTheme__tokenOperator">/</span><span>NavLink</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="CertTheme__tokenOperator">&lt;</span><span class="CertTheme__tokenOperator">/</span><span>li</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp; </span><span class="CertTheme__tokenOperator">&lt;</span><span class="CertTheme__tokenOperator">/</span><span>ul</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="CertTheme__tokenOperator">&lt;</span><span>Route path</span><span class="CertTheme__tokenOperator">=</span><span class="CertTheme__tokenSelector">"/about/:aboutId"</span><span> component</span><span class="CertTheme__tokenOperator">=</span><span class="CertTheme__tokenPunctuation">{</span><span>AboutPage</span><span class="CertTheme__tokenPunctuation">}</span><span> </span><span class="CertTheme__tokenOperator">/</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="CertTheme__tokenOperator">&lt;</span><span>Route path</span><span class="CertTheme__tokenOperator">=</span><span class="CertTheme__tokenSelector">"/about"</span><span> component</span><span class="CertTheme__tokenOperator">=</span><span class="CertTheme__tokenPunctuation">{</span><span>AboutPage</span><span class="CertTheme__tokenPunctuation">}</span><span> </span><span class="CertTheme__tokenOperator">/</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="CertTheme__tokenOperator">&lt;</span><span>Route path</span><span class="CertTheme__tokenOperator">=</span><span class="CertTheme__tokenSelector">"/"</span><span> component</span><span class="CertTheme__tokenOperator">=</span><span class="CertTheme__tokenPunctuation">{</span><span>HomePage</span><span class="CertTheme__tokenPunctuation">}</span><span> </span><span class="CertTheme__tokenOperator">/</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="CertTheme__tokenOperator">&lt;</span><span class="CertTheme__tokenOperator">/</span><span>div</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp; &nbsp; &nbsp;</span><span class="CertTheme__tokenOperator">&lt;</span><span class="CertTheme__tokenOperator">/</span><span>Router</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp; &nbsp;</span><span class="CertTheme__tokenPunctuation">)</span><span class="CertTheme__tokenPunctuation">;</span><br><span>&nbsp;</span><span class="CertTheme__tokenPunctuation">}</span><br><span class="CertTheme__tokenPunctuation">}</span><br><span class="CertTheme__tokenAttr">export</span><span> </span><span class="CertTheme__tokenAttr">default</span><span> App</span><span class="CertTheme__tokenPunctuation">;</span></pre></div></div><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>The HomePage is a simple functional component, which have a button. On clicking the button we are using props.history.push(‘/about/’ + data) , which is used to programatically navigate to /about/data</span></p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-fnemkktxm" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm"><span class="CertTheme__tokenAttr">export</span><span> </span><span class="CertTheme__tokenAttr">default</span><span> </span><span class="CertTheme__tokenAttr">function</span><span> </span><span class="CertTheme__tokenFunction">HomePage</span><span class="CertTheme__tokenPunctuation">(</span><span>props</span><span class="CertTheme__tokenPunctuation">)</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span>&nbsp; </span><span class="CertTheme__tokenAttr">const</span><span> </span><span>handleClick</span><span> </span><span class="CertTheme__tokenOperator">=</span><span> </span><span class="CertTheme__tokenPunctuation">(</span><span>data</span><span class="CertTheme__tokenPunctuation">)</span><span> </span><span class="CertTheme__tokenOperator">=&gt;</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span>&nbsp; &nbsp;props</span><span class="CertTheme__tokenPunctuation">.</span><span>history</span><span class="CertTheme__tokenPunctuation">.</span><span class="CertTheme__tokenFunction">push</span><span class="CertTheme__tokenPunctuation">(</span><span class="CertTheme__tokenSelector">'/about/'</span><span> </span><span class="CertTheme__tokenOperator">+</span><span> data</span><span class="CertTheme__tokenPunctuation">)</span><span class="CertTheme__tokenPunctuation">;</span><br><span>&nbsp; </span><span class="CertTheme__tokenPunctuation">}</span><br><span class="CertTheme__tokenAttr">return</span><span> </span><span class="CertTheme__tokenPunctuation">(</span><br><span>&nbsp; &nbsp;</span><span class="CertTheme__tokenOperator">&lt;</span><span>div</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp; &nbsp; &nbsp;</span><span class="CertTheme__tokenOperator">&lt;</span><span>button onClick</span><span class="CertTheme__tokenOperator">=</span><span class="CertTheme__tokenPunctuation">{</span><span class="CertTheme__tokenPunctuation">(</span><span class="CertTheme__tokenPunctuation">)</span><span> </span><span class="CertTheme__tokenOperator">=&gt;</span><span> </span><span class="CertTheme__tokenFunction">handleClick</span><span class="CertTheme__tokenPunctuation">(</span><span class="CertTheme__tokenSelector">'Nabendu'</span><span class="CertTheme__tokenPunctuation">)</span><span class="CertTheme__tokenPunctuation">}</span><span class="CertTheme__tokenOperator">&gt;</span><span>To About</span><span class="CertTheme__tokenOperator">&lt;</span><span class="CertTheme__tokenOperator">/</span><span>button</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp; &nbsp;</span><span class="CertTheme__tokenOperator">&lt;</span><span class="CertTheme__tokenOperator">/</span><span>div</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp;</span><span class="CertTheme__tokenPunctuation">)</span><br><span class="CertTheme__tokenPunctuation">}</span></pre></div></div><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>The AboutPage is also a simple functional component, which gets the passed data by props.match.params.aboutId</span></p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-3hx3itb3u" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm"><span class="CertTheme__tokenAttr">export</span><span> </span><span class="CertTheme__tokenAttr">default</span><span> </span><span class="CertTheme__tokenAttr">function</span><span> </span><span class="CertTheme__tokenFunction">AboutPage</span><span class="CertTheme__tokenPunctuation">(</span><span>props</span><span class="CertTheme__tokenPunctuation">)</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span>&nbsp;</span><span class="CertTheme__tokenAttr">if</span><span class="CertTheme__tokenPunctuation">(</span><span class="CertTheme__tokenOperator">!</span><span>props</span><span class="CertTheme__tokenPunctuation">.</span><span>match</span><span class="CertTheme__tokenPunctuation">.</span><span>params</span><span class="CertTheme__tokenPunctuation">.</span><span>aboutId</span><span class="CertTheme__tokenPunctuation">)</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span>&nbsp; &nbsp; &nbsp;</span><span class="CertTheme__tokenAttr">return</span><span> </span><span class="CertTheme__tokenOperator">&lt;</span><span>div</span><span class="CertTheme__tokenOperator">&gt;</span><span>No Data Yet</span><span class="CertTheme__tokenOperator">&lt;</span><span class="CertTheme__tokenOperator">/</span><span>div</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp;</span><span class="CertTheme__tokenPunctuation">}</span><br><span>&nbsp;</span><span class="CertTheme__tokenAttr">return</span><span> </span><span class="CertTheme__tokenPunctuation">(</span><br><span>&nbsp; &nbsp;</span><span class="CertTheme__tokenOperator">&lt;</span><span>div</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp; &nbsp; &nbsp;</span><span class="CertTheme__tokenPunctuation">{</span><span>`</span><span class="CertTheme__tokenSelector">Data from HomePage </span><span>${</span><span>props</span><span class="CertTheme__tokenPunctuation">.</span><span>match</span><span class="CertTheme__tokenPunctuation">.</span><span>params</span><span class="CertTheme__tokenPunctuation">.</span><span>aboutId</span><span>}</span><span>`</span><span class="CertTheme__tokenPunctuation">}</span><br><span>&nbsp; &nbsp;</span><span class="CertTheme__tokenOperator">&lt;</span><span class="CertTheme__tokenOperator">/</span><span>div</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp;</span><span class="CertTheme__tokenPunctuation">)</span><br><span class="CertTheme__tokenPunctuation">}</span></pre></div></div><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>The Page after clicking on the button in the HomePage looks like below.</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><img alt="HomePage" loading="lazy" width="100" height="100" decoding="async"  class="" style="color:transparent;width:100%;height:auto;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url(&quot;data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3C/filter%3E%3Cimage preserveAspectRatio='none' filter='url(%23b)' x='0' y='0' height='100%25' width='100%25' href='data:image/svg+xml;base64,CiAgPHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxkZWZzPgogICAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImciPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNjY2MiIG9mZnNldD0iMjAlIiAvPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNkZGQiIG9mZnNldD0iNTAlIiAvPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNlZWUiIG9mZnNldD0iNzAlIiAvPgogICAgICA8L2xpbmVhckdyYWRpZW50PgogICAgPC9kZWZzPgogICAgPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9IiNlZWUiIC8+CiAgICA8cmVjdCBpZD0iciIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjZykiIC8+CiAgICA8YW5pbWF0ZSB4bGluazpocmVmPSIjciIgYXR0cmlidXRlTmFtZT0ieCIgZnJvbT0iLTEwMCIgdG89IjEwMCIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiICAvPgogIDwvc3ZnPg=='/%3E%3C/svg%3E&quot;)" sizes="(min-width: 767px) 50vw, 100vw" srcSet="" src="https://images.unsplash.com/photo-1563206767541-3eb2c5952d76?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80"></p></div></div></div></div><div class="rounded-xl mb-spacing24 last:mb-0 outline duration-300 transition ease-in-out outline-1 outline-neutral-200 hover:outline-neutral-400 hover:shadow-neutralShadow hidden"><div class="cursor-pointer items-center justify-between p-4 transition-all duration-500 undefined bg-white p-spacing16 pl-spacing24 flex gap-spacing8 rounded-xl"><div class="flex text-sm font-semibold items-center overflow-x-auto"><h3 class="text-neutral-800 font-bold text-sm leading-5.5 -indent-0 pl-5 overflow-hidden line-clamp-2">20. Explain the new feature of React Memo in React v16.6?</h3></div><div class="md:w-5 md:h-5 w-6 h-6 ml-spacing8 flex items-center transition-all duration-300"><i class="icon-chevron-up-filled inline-block transition-transform duration-300 text-xl rotate-180 text-primary-main"></i></div></div><div class="overflow-hidden p-0 transition-all duration-500 ease-in-out rounded-b-xl" style="max-height:0px"><div><div class="p-spacing24 bg-white border-t border-neutral-200 faq-editor-content last:rounded-b-xl"><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>The new feature of React Memo are used to solve the problem which we get if the state is not updating in this.setState, but still all components are re-rendered.</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>To solve this problem we use two solutions. One is to check and compare state in shouldComponentUpdate and if they are same, we don’t re-render components. The other solution is to use PureComponents. See question 51for details. But both of them can’t be used with functional components.</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>Let’s look at the problem again. Here we have a FunctionalComp, which gets the same state passed every 3 sec.</span></p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-q8bpwoe6c" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm"><span class="CertTheme__tokenAttr">import</span><span> React</span><span class="CertTheme__tokenPunctuation">,</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><span> Component </span><span class="CertTheme__tokenPunctuation">}</span><span> </span><span class="CertTheme__tokenAttr">from</span><span> </span><span class="CertTheme__tokenSelector">"react"</span><span class="CertTheme__tokenPunctuation">;</span><br><span class="CertTheme__tokenAttr">import</span><span> FunctionalComp </span><span class="CertTheme__tokenAttr">from</span><span> </span><span class="CertTheme__tokenSelector">"./components/functionalComp"</span><span class="CertTheme__tokenPunctuation">;</span><br><span class="CertTheme__tokenAttr">import</span><span> </span><span class="CertTheme__tokenSelector">"./App.css"</span><span class="CertTheme__tokenPunctuation">;</span><br><span class="CertTheme__tokenAttr">class</span><span> </span><span class="CertTheme__tokenFunction">App</span><span> </span><span class="CertTheme__tokenAttr">extends</span><span> </span><span class="CertTheme__tokenFunction">Component</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span>&nbsp;state </span><span class="CertTheme__tokenOperator">=</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span>&nbsp; &nbsp;val</span><span class="CertTheme__tokenOperator">:</span><span> </span><span class="CertTheme__tokenProperty">1</span><br><span>&nbsp;</span><span class="CertTheme__tokenPunctuation">}</span><span class="CertTheme__tokenPunctuation">;</span><br><span class="CertTheme__tokenFunction">componentDidMount</span><span class="CertTheme__tokenPunctuation">(</span><span class="CertTheme__tokenPunctuation">)</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span>&nbsp; &nbsp;</span><span class="CertTheme__tokenFunction">setInterval</span><span class="CertTheme__tokenPunctuation">(</span><span class="CertTheme__tokenPunctuation">(</span><span class="CertTheme__tokenPunctuation">)</span><span> </span><span class="CertTheme__tokenOperator">=&gt;</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span>&nbsp; &nbsp; &nbsp;</span><span class="CertTheme__tokenAttr">this</span><span class="CertTheme__tokenPunctuation">.</span><span class="CertTheme__tokenFunction">setState</span><span class="CertTheme__tokenPunctuation">(</span><span class="CertTheme__tokenPunctuation">{</span><span> </span><span>val</span><span class="CertTheme__tokenOperator">:</span><span> </span><span class="CertTheme__tokenProperty">1</span><span> </span><span class="CertTheme__tokenPunctuation">}</span><span class="CertTheme__tokenPunctuation">)</span><span class="CertTheme__tokenPunctuation">;</span><br><span>&nbsp; &nbsp;</span><span class="CertTheme__tokenPunctuation">}</span><span class="CertTheme__tokenPunctuation">,</span><span> </span><span class="CertTheme__tokenProperty">3000</span><span class="CertTheme__tokenPunctuation">)</span><span class="CertTheme__tokenPunctuation">;</span><br><span>&nbsp;</span><span class="CertTheme__tokenPunctuation">}</span><br><span>&nbsp;</span><span class="CertTheme__tokenFunction">render</span><span class="CertTheme__tokenPunctuation">(</span><span class="CertTheme__tokenPunctuation">)</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span>&nbsp; &nbsp;</span><span class="CertTheme__tokenAttr">return</span><span> </span><span class="CertTheme__tokenPunctuation">(</span><br><span>&nbsp; &nbsp; &nbsp;</span><span class="CertTheme__tokenOperator">&lt;</span><span>div className</span><span class="CertTheme__tokenOperator">=</span><span class="CertTheme__tokenSelector">"App"</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="CertTheme__tokenOperator">&lt;</span><span>header className</span><span class="CertTheme__tokenOperator">=</span><span class="CertTheme__tokenSelector">"App-header"</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="CertTheme__tokenOperator">&lt;</span><span>FunctionalComp val</span><span class="CertTheme__tokenOperator">=</span><span class="CertTheme__tokenPunctuation">{</span><span class="CertTheme__tokenAttr">this</span><span class="CertTheme__tokenPunctuation">.</span><span>state</span><span class="CertTheme__tokenPunctuation">.</span><span>val</span><span class="CertTheme__tokenPunctuation">}</span><span> </span><span class="CertTheme__tokenOperator">/</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="CertTheme__tokenOperator">&lt;</span><span class="CertTheme__tokenOperator">/</span><span>header</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp; &nbsp; &nbsp;</span><span class="CertTheme__tokenOperator">&lt;</span><span class="CertTheme__tokenOperator">/</span><span>div</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp; &nbsp;</span><span class="CertTheme__tokenPunctuation">)</span><span class="CertTheme__tokenPunctuation">;</span><br><span>&nbsp;</span><span class="CertTheme__tokenPunctuation">}</span><br><span class="CertTheme__tokenPunctuation">}</span><br><span class="CertTheme__tokenAttr">export</span><span> </span><span class="CertTheme__tokenAttr">default</span><span> App</span><span class="CertTheme__tokenPunctuation">;</span></pre></div></div><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>The FunctionalComp is below.</span></p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-1yt9g2inp" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm"><span class="CertTheme__tokenAttr">import</span><span> React from “react"</span><span class="CertTheme__tokenPunctuation">;</span><br><span class="CertTheme__tokenAttr">export</span><span> </span><span class="CertTheme__tokenAttr">default</span><span> </span><span class="CertTheme__tokenPunctuation">(</span><span>props</span><span class="CertTheme__tokenPunctuation">)</span><span> </span><span class="CertTheme__tokenOperator">=&gt;</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span>&nbsp;console</span><span class="CertTheme__tokenPunctuation">.</span><span class="CertTheme__tokenFunction">log</span><span class="CertTheme__tokenPunctuation">(</span><span class="CertTheme__tokenSelector">"val ="</span><span class="CertTheme__tokenPunctuation">,</span><span> props</span><span class="CertTheme__tokenPunctuation">.</span><span>val</span><span class="CertTheme__tokenPunctuation">)</span><span class="CertTheme__tokenPunctuation">;</span><br><span>&nbsp;</span><span class="CertTheme__tokenAttr">return</span><span> </span><span class="CertTheme__tokenOperator">&lt;</span><span>div</span><span class="CertTheme__tokenOperator">&gt;</span><span class="CertTheme__tokenPunctuation">{</span><span>props</span><span class="CertTheme__tokenPunctuation">.</span><span>val</span><span class="CertTheme__tokenPunctuation">}</span><span class="CertTheme__tokenOperator">&lt;</span><span class="CertTheme__tokenOperator">/</span><span>div</span><span class="CertTheme__tokenOperator">&gt;</span><span class="CertTheme__tokenPunctuation">;</span><br><span class="CertTheme__tokenPunctuation">}</span><span class="CertTheme__tokenPunctuation">;</span></pre></div></div><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>So, if we run it we get a value of 1 every 3 seconds printed like below.</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><img alt="React.memo" loading="lazy" width="100" height="100" decoding="async"  class="" style="color:transparent;width:100%;height:auto;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url(&quot;data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3C/filter%3E%3Cimage preserveAspectRatio='none' filter='url(%23b)' x='0' y='0' height='100%25' width='100%25' href='data:image/svg+xml;base64,CiAgPHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxkZWZzPgogICAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImciPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNjY2MiIG9mZnNldD0iMjAlIiAvPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNkZGQiIG9mZnNldD0iNTAlIiAvPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNlZWUiIG9mZnNldD0iNzAlIiAvPgogICAgICA8L2xpbmVhckdyYWRpZW50PgogICAgPC9kZWZzPgogICAgPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9IiNlZWUiIC8+CiAgICA8cmVjdCBpZD0iciIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjZykiIC8+CiAgICA8YW5pbWF0ZSB4bGluazpocmVmPSIjciIgYXR0cmlidXRlTmFtZT0ieCIgZnJvbT0iLTEwMCIgdG89IjEwMCIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiICAvPgogIDwvc3ZnPg=='/%3E%3C/svg%3E&quot;)" sizes="(min-width: 767px) 50vw, 100vw" srcSet="" src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80"></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>We can solve it by wrapping the component in React.memo.</span></p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-x16eq803v" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm"><span class="CertTheme__tokenAttr">import</span><span> React from “react"</span><span class="CertTheme__tokenPunctuation">;</span><br><span class="CertTheme__tokenAttr">export</span><span> </span><span class="CertTheme__tokenAttr">default</span><span> React</span><span class="CertTheme__tokenPunctuation">.</span><span class="CertTheme__tokenFunction">memo</span><span class="CertTheme__tokenPunctuation">(</span><span>props</span><span> </span><span class="CertTheme__tokenOperator">=&gt;</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span>&nbsp;console</span><span class="CertTheme__tokenPunctuation">.</span><span class="CertTheme__tokenFunction">log</span><span class="CertTheme__tokenPunctuation">(</span><span class="CertTheme__tokenSelector">"val ="</span><span class="CertTheme__tokenPunctuation">,</span><span> props</span><span class="CertTheme__tokenPunctuation">.</span><span>val</span><span class="CertTheme__tokenPunctuation">)</span><span class="CertTheme__tokenPunctuation">;</span><br><span>&nbsp;</span><span class="CertTheme__tokenAttr">return</span><span> </span><span class="CertTheme__tokenOperator">&lt;</span><span>div</span><span class="CertTheme__tokenOperator">&gt;</span><span class="CertTheme__tokenPunctuation">{</span><span>props</span><span class="CertTheme__tokenPunctuation">.</span><span>val</span><span class="CertTheme__tokenPunctuation">}</span><span class="CertTheme__tokenOperator">&lt;</span><span class="CertTheme__tokenOperator">/</span><span>div</span><span class="CertTheme__tokenOperator">&gt;</span><span class="CertTheme__tokenPunctuation">;</span><br><span class="CertTheme__tokenPunctuation">}</span><span class="CertTheme__tokenPunctuation">)</span><span class="CertTheme__tokenPunctuation">;</span></pre></div></div><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>Now the output is just one 1 and after that, as every time the state of it is set to one, so no more renders.</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><img alt="React.memo" loading="lazy" width="100" height="100" decoding="async"  class="" style="color:transparent;width:100%;height:auto;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url(&quot;data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3C/filter%3E%3Cimage preserveAspectRatio='none' filter='url(%23b)' x='0' y='0' height='100%25' width='100%25' href='data:image/svg+xml;base64,CiAgPHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxkZWZzPgogICAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImciPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNjY2MiIG9mZnNldD0iMjAlIiAvPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNkZGQiIG9mZnNldD0iNTAlIiAvPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNlZWUiIG9mZnNldD0iNzAlIiAvPgogICAgICA8L2xpbmVhckdyYWRpZW50PgogICAgPC9kZWZzPgogICAgPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9IiNlZWUiIC8+CiAgICA8cmVjdCBpZD0iciIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjZykiIC8+CiAgICA8YW5pbWF0ZSB4bGluazpocmVmPSIjciIgYXR0cmlidXRlTmFtZT0ieCIgZnJvbT0iLTEwMCIgdG89IjEwMCIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiICAvPgogIDwvc3ZnPg=='/%3E%3C/svg%3E&quot;)" sizes="(min-width: 767px) 50vw, 100vw" srcSet="" src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80"></p></div></div></div></div><div class="rounded-xl mb-spacing24 last:mb-0 outline duration-300 transition ease-in-out outline-1 outline-neutral-200 hover:outline-neutral-400 hover:shadow-neutralShadow hidden"><div class="cursor-pointer items-center justify-between p-4 transition-all duration-500 undefined bg-white p-spacing16 pl-spacing24 flex gap-spacing8 rounded-xl"><div class="flex text-sm font-semibold items-center overflow-x-auto"><h3 class="text-neutral-800 font-bold text-sm leading-5.5 -indent-0 pl-5 overflow-hidden line-clamp-2">21. Explain the new feature of Lazy loading and code splitting in React v16.6?</h3></div><div class="md:w-5 md:h-5 w-6 h-6 ml-spacing8 flex items-center transition-all duration-300"><i class="icon-chevron-up-filled inline-block transition-transform duration-300 text-xl rotate-180 text-primary-main"></i></div></div><div class="overflow-hidden p-0 transition-all duration-500 ease-in-out rounded-b-xl" style="max-height:0px"><div><div class="p-spacing24 bg-white border-t border-neutral-200 faq-editor-content last:rounded-b-xl"><p bis_size="{&quot;x&quot;:10,&quot;y&quot;:26,&quot;w&quot;:996,&quot;h&quot;:28,&quot;abs_x&quot;:311,&quot;abs_y&quot;:612}"><span bis_size="{&quot;x&quot;:10,&quot;y&quot;:31,&quot;w&quot;:474,&quot;h&quot;:17,&quot;abs_x&quot;:311,&quot;abs_y&quot;:617}" data-contrast="none" lang="EN-US"><strong bis_size="{&quot;x&quot;:10,&quot;y&quot;:31,&quot;w&quot;:474,&quot;h&quot;:17,&quot;abs_x&quot;:311,&quot;abs_y&quot;:617}"><em bis_size="{&quot;x&quot;:10,&quot;y&quot;:31,&quot;w&quot;:474,&quot;h&quot;:17,&quot;abs_x&quot;:311,&quot;abs_y&quot;:617}">It's no surprise that this one pops up often in React questions.</em></strong></span><em bis_size="{&quot;x&quot;:484,&quot;y&quot;:31,&quot;w&quot;:8,&quot;h&quot;:17,&quot;abs_x&quot;:785,&quot;abs_y&quot;:617}"><strong bis_size="{&quot;x&quot;:484,&quot;y&quot;:31,&quot;w&quot;:8,&quot;h&quot;:17,&quot;abs_x&quot;:785,&quot;abs_y&quot;:617}"><span bis_size="{&quot;x&quot;:484,&quot;y&quot;:31,&quot;w&quot;:4,&quot;h&quot;:17,&quot;abs_x&quot;:785,&quot;abs_y&quot;:617}" data-ccp-props="{'201341983':0,'335559739':160,'335559740':259}">&nbsp;</span>&nbsp;</strong></em></p><p bis_size="{&quot;x&quot;:10,&quot;y&quot;:70,&quot;w&quot;:996,&quot;h&quot;:56,&quot;abs_x&quot;:311,&quot;abs_y&quot;:656}">Lazy loading is the new feature introduced in React v16.6, which allows for some Components to load later than other components. This way we can load the components which are fast like text earlier and components which loads images a bit later.</p><ul bis_size="{&quot;x&quot;:10,&quot;y&quot;:142,&quot;w&quot;:996,&quot;h&quot;:56,&quot;abs_x&quot;:311,&quot;abs_y&quot;:728}"><li class="CertTheme__listItem pt-spacing10">Consider the below code for App.js. In it, there are two Components ContentComponent and myComp.</li><li class="CertTheme__listItem pt-spacing10">One has some paragraph containing <em bis_size="{&quot;x&quot;:313,&quot;y&quot;:175,&quot;w&quot;:87,&quot;h&quot;:17,&quot;abs_x&quot;:614,&quot;abs_y&quot;:761}">lorem ipsum</em> and others have an image to load from <em bis_size="{&quot;x&quot;:683,&quot;y&quot;:175,&quot;w&quot;:64,&quot;h&quot;:17,&quot;abs_x&quot;:984,&quot;abs_y&quot;:761}">unsplash</em>.</li></ul><p bis_size="{&quot;x&quot;:10,&quot;y&quot;:214,&quot;w&quot;:996,&quot;h&quot;:56,&quot;abs_x&quot;:311,&quot;abs_y&quot;:800}">Now, we are lazy loading myComp as it has an image to load. Note the special way to import it and also we need to wrap the component in Suspense. Now, Suspense will contain the fallback Component which will be shown while myComp gets loaded.</p><p bis_size="{&quot;x&quot;:10,&quot;y&quot;:286,&quot;w&quot;:996,&quot;h&quot;:28,&quot;abs_x&quot;:311,&quot;abs_y&quot;:872}">The other component ContentComponent will load instantly.</p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-5gtj8zdun" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm">//App.js<br bis_size="{&quot;x&quot;:85,&quot;y&quot;:334,&quot;w&quot;:0,&quot;h&quot;:19,&quot;abs_x&quot;:386,&quot;abs_y&quot;:920}">import React, { Component, lazy, Suspense } from "react";<br bis_size="{&quot;x&quot;:516,&quot;y&quot;:362,&quot;w&quot;:0,&quot;h&quot;:19,&quot;abs_x&quot;:817,&quot;abs_y&quot;:948}">import "./App.css";<br bis_size="{&quot;x&quot;:182,&quot;y&quot;:390,&quot;w&quot;:0,&quot;h&quot;:19,&quot;abs_x&quot;:483,&quot;abs_y&quot;:976}">import ContentComponent from './components/ContentComponent';<br bis_size="{&quot;x&quot;:551,&quot;y&quot;:418,&quot;w&quot;:0,&quot;h&quot;:19,&quot;abs_x&quot;:852,&quot;abs_y&quot;:1004}">const MyComp = lazy(() =&gt; import("./components/myComp"));<br bis_size="{&quot;x&quot;:516,&quot;y&quot;:446,&quot;w&quot;:0,&quot;h&quot;:19,&quot;abs_x&quot;:817,&quot;abs_y&quot;:1032}">class App extends Component {<br bis_size="{&quot;x&quot;:270,&quot;y&quot;:474,&quot;w&quot;:0,&quot;h&quot;:19,&quot;abs_x&quot;:571,&quot;abs_y&quot;:1060}">&nbsp;render() {<br bis_size="{&quot;x&quot;:111,&quot;y&quot;:502,&quot;w&quot;:0,&quot;h&quot;:19,&quot;abs_x&quot;:412,&quot;abs_y&quot;:1088}">&nbsp; &nbsp;return (<br bis_size="{&quot;x&quot;:111,&quot;y&quot;:530,&quot;w&quot;:0,&quot;h&quot;:19,&quot;abs_x&quot;:412,&quot;abs_y&quot;:1116}">&nbsp; &nbsp; &nbsp;&lt;div className="App"&gt;<br bis_size="{&quot;x&quot;:243,&quot;y&quot;:558,&quot;w&quot;:0,&quot;h&quot;:19,&quot;abs_x&quot;:544,&quot;abs_y&quot;:1144}">&nbsp; &nbsp; &nbsp; &nbsp;&lt;header className="App-header"&gt; &nbsp;<br bis_size="{&quot;x&quot;:366,&quot;y&quot;:586,&quot;w&quot;:0,&quot;h&quot;:19,&quot;abs_x&quot;:667,&quot;abs_y&quot;:1172}">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;h1&gt;Lazy Loading Demo&lt;/h1&gt; &nbsp; &nbsp; &nbsp; &nbsp;<br bis_size="{&quot;x&quot;:393,&quot;y&quot;:614,&quot;w&quot;:0,&quot;h&quot;:19,&quot;abs_x&quot;:694,&quot;abs_y&quot;:1200}">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Suspense fallback={&lt;div&gt;Loading.....&lt;/div&gt;}&gt;<br bis_size="{&quot;x&quot;:498,&quot;y&quot;:642,&quot;w&quot;:0,&quot;h&quot;:19,&quot;abs_x&quot;:799,&quot;abs_y&quot;:1228}">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;MyComp /&gt;<br bis_size="{&quot;x&quot;:208,&quot;y&quot;:670,&quot;w&quot;:0,&quot;h&quot;:19,&quot;abs_x&quot;:509,&quot;abs_y&quot;:1256}">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/Suspense&gt;<br bis_size="{&quot;x&quot;:199,&quot;y&quot;:698,&quot;w&quot;:0,&quot;h&quot;:19,&quot;abs_x&quot;:500,&quot;abs_y&quot;:1284}">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;ContentComponent /&gt;<br bis_size="{&quot;x&quot;:270,&quot;y&quot;:726,&quot;w&quot;:0,&quot;h&quot;:19,&quot;abs_x&quot;:571,&quot;abs_y&quot;:1312}">&nbsp; &nbsp; &nbsp; &nbsp;&lt;/header&gt;<br bis_size="{&quot;x&quot;:155,&quot;y&quot;:754,&quot;w&quot;:0,&quot;h&quot;:19,&quot;abs_x&quot;:456,&quot;abs_y&quot;:1340}">&nbsp; &nbsp; &nbsp;&lt;/div&gt;<br bis_size="{&quot;x&quot;:111,&quot;y&quot;:782,&quot;w&quot;:0,&quot;h&quot;:19,&quot;abs_x&quot;:412,&quot;abs_y&quot;:1368}">&nbsp; &nbsp;);<br bis_size="{&quot;x&quot;:58,&quot;y&quot;:810,&quot;w&quot;:0,&quot;h&quot;:19,&quot;abs_x&quot;:359,&quot;abs_y&quot;:1396}">&nbsp;}<br bis_size="{&quot;x&quot;:32,&quot;y&quot;:838,&quot;w&quot;:0,&quot;h&quot;:19,&quot;abs_x&quot;:333,&quot;abs_y&quot;:1424}">}<br bis_size="{&quot;x&quot;:23,&quot;y&quot;:866,&quot;w&quot;:0,&quot;h&quot;:19,&quot;abs_x&quot;:324,&quot;abs_y&quot;:1452}">export default App;<br bis_size="{&quot;x&quot;:182,&quot;y&quot;:894,&quot;w&quot;:0,&quot;h&quot;:19,&quot;abs_x&quot;:483,&quot;abs_y&quot;:1480}">//ContentComponent.js<br bis_size="{&quot;x&quot;:199,&quot;y&quot;:922,&quot;w&quot;:0,&quot;h&quot;:19,&quot;abs_x&quot;:500,&quot;abs_y&quot;:1508}">import React from 'react'<br bis_size="{&quot;x&quot;:234,&quot;y&quot;:950,&quot;w&quot;:0,&quot;h&quot;:19,&quot;abs_x&quot;:535,&quot;abs_y&quot;:1536}">export default function ContentComponent() {<br bis_size="{&quot;x&quot;:402,&quot;y&quot;:978,&quot;w&quot;:0,&quot;h&quot;:19,&quot;abs_x&quot;:703,&quot;abs_y&quot;:1564}">&nbsp;return (<br bis_size="{&quot;x&quot;:94,&quot;y&quot;:1006,&quot;w&quot;:0,&quot;h&quot;:19,&quot;abs_x&quot;:395,&quot;abs_y&quot;:1592}">&nbsp; &nbsp;&lt;div&gt;<br bis_size="{&quot;x&quot;:85,&quot;y&quot;:1034,&quot;w&quot;:0,&quot;h&quot;:19,&quot;abs_x&quot;:386,&quot;abs_y&quot;:1620}">&nbsp; &nbsp; &nbsp;&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry...&lt;/p&gt;<br bis_size="{&quot;x&quot;:789,&quot;y&quot;:1062,&quot;w&quot;:0,&quot;h&quot;:19,&quot;abs_x&quot;:1090,&quot;abs_y&quot;:1648}">&nbsp; &nbsp; &nbsp;&lt;p&gt;It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout...&lt;/p&gt;<br bis_size="{&quot;x&quot;:261,&quot;y&quot;:1118,&quot;w&quot;:0,&quot;h&quot;:19,&quot;abs_x&quot;:562,&quot;abs_y&quot;:1704}">&nbsp; &nbsp; &nbsp;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...&lt;/p&gt;<br bis_size="{&quot;x&quot;:243,&quot;y&quot;:1174,&quot;w&quot;:0,&quot;h&quot;:19,&quot;abs_x&quot;:544,&quot;abs_y&quot;:1760}">&nbsp; &nbsp;&lt;/div&gt;<br bis_size="{&quot;x&quot;:94,&quot;y&quot;:1202,&quot;w&quot;:0,&quot;h&quot;:19,&quot;abs_x&quot;:395,&quot;abs_y&quot;:1788}">&nbsp;)<br bis_size="{&quot;x&quot;:32,&quot;y&quot;:1230,&quot;w&quot;:0,&quot;h&quot;:19,&quot;abs_x&quot;:333,&quot;abs_y&quot;:1816}">}<br bis_size="{&quot;x&quot;:23,&quot;y&quot;:1258,&quot;w&quot;:0,&quot;h&quot;:19,&quot;abs_x&quot;:324,&quot;abs_y&quot;:1844}">//myComp.js<br bis_size="{&quot;x&quot;:111,&quot;y&quot;:1286,&quot;w&quot;:0,&quot;h&quot;:19,&quot;abs_x&quot;:412,&quot;abs_y&quot;:1872}">import React from "react";<br bis_size="{&quot;x&quot;:243,&quot;y&quot;:1314,&quot;w&quot;:0,&quot;h&quot;:19,&quot;abs_x&quot;:544,&quot;abs_y&quot;:1900}">export default () =&gt; {<br bis_size="{&quot;x&quot;:208,&quot;y&quot;:1342,&quot;w&quot;:0,&quot;h&quot;:19,&quot;abs_x&quot;:509,&quot;abs_y&quot;:1928}">&nbsp;return &lt;img src="<a bis_size="{&quot;x&quot;:173,&quot;y&quot;:1370,&quot;w&quot;:527,&quot;h&quot;:19,&quot;abs_x&quot;:474,&quot;abs_y&quot;:1956}" href="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?ixlib=rb-0.3.5&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;s=a20bc6324f6ef2969d9a7cae56b8d4d1&amp;auto=format&amp;fit=crop&amp;w=1650&amp;q=60" rel="nofollow" target="_blank">https://images.unsplash.com/photo-1517694712202-14dd9538aa97</a>" width="960" height="480" alt="coding" /&gt;;<br bis_size="{&quot;x&quot;:155,&quot;y&quot;:1398,&quot;w&quot;:0,&quot;h&quot;:19,&quot;abs_x&quot;:456,&quot;abs_y&quot;:1984}">};</pre></div></div><p bis_size="{&quot;x&quot;:10,&quot;y&quot;:1466,&quot;w&quot;:996,&quot;h&quot;:56,&quot;abs_x&quot;:311,&quot;abs_y&quot;:2052}">React is very fast and in localhost, condition to see it, we have to emulate Slow speed. To do so open the console, and go to Network tab. Then click on Online and select Slow 3G.</p><p bis_size="{&quot;x&quot;:10,&quot;y&quot;:1538,&quot;w&quot;:996,&quot;h&quot;:64,&quot;abs_x&quot;:311,&quot;abs_y&quot;:2124}"><img alt="Network tab" loading="lazy" width="100" height="100" decoding="async"  class="fr-fic fr-dib" style="color:transparent;width:100%;height:auto;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url(&quot;data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3C/filter%3E%3Cimage preserveAspectRatio='none' filter='url(%23b)' x='0' y='0' height='100%25' width='100%25' href='data:image/svg+xml;base64,CiAgPHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxkZWZzPgogICAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImciPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNjY2MiIG9mZnNldD0iMjAlIiAvPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNkZGQiIG9mZnNldD0iNTAlIiAvPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNlZWUiIG9mZnNldD0iNzAlIiAvPgogICAgICA8L2xpbmVhckdyYWRpZW50PgogICAgPC9kZWZzPgogICAgPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9IiNlZWUiIC8+CiAgICA8cmVjdCBpZD0iciIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjZykiIC8+CiAgICA8YW5pbWF0ZSB4bGluazpocmVmPSIjciIgYXR0cmlidXRlTmFtZT0ieCIgZnJvbT0iLTEwMCIgdG89IjEwMCIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiICAvPgogIDwvc3ZnPg=='/%3E%3C/svg%3E&quot;)" sizes="(min-width: 767px) 50vw, 100vw" srcSet="" src="https://images.unsplash.com/photo-1497215968147-3f36c5df5ed3?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80"></p><p bis_size="{&quot;x&quot;:10,&quot;y&quot;:1618,&quot;w&quot;:996,&quot;h&quot;:28,&quot;abs_x&quot;:311,&quot;abs_y&quot;:2204}" dir="ltr">Now, when you refresh the local running app, you can see Loading…..coming.</p><p bis_size="{&quot;x&quot;:10,&quot;y&quot;:1662,&quot;w&quot;:996,&quot;h&quot;:450,&quot;abs_x&quot;:311,&quot;abs_y&quot;:2248}" dir="ltr"><img alt="Lazy Loading Demo" loading="lazy" width="100" height="100" decoding="async"  class="fr-fic fr-dib" style="color:transparent;width:100%;height:auto;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url(&quot;data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3C/filter%3E%3Cimage preserveAspectRatio='none' filter='url(%23b)' x='0' y='0' height='100%25' width='100%25' href='data:image/svg+xml;base64,CiAgPHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxkZWZzPgogICAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImciPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNjY2MiIG9mZnNldD0iMjAlIiAvPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNkZGQiIG9mZnNldD0iNTAlIiAvPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNlZWUiIG9mZnNldD0iNzAlIiAvPgogICAgICA8L2xpbmVhckdyYWRpZW50PgogICAgPC9kZWZzPgogICAgPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9IiNlZWUiIC8+CiAgICA8cmVjdCBpZD0iciIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjZykiIC8+CiAgICA8YW5pbWF0ZSB4bGluazpocmVmPSIjciIgYXR0cmlidXRlTmFtZT0ieCIgZnJvbT0iLTEwMCIgdG89IjEwMCIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiICAvPgogIDwvc3ZnPg=='/%3E%3C/svg%3E&quot;)" sizes="(min-width: 767px) 50vw, 100vw" srcSet="" src="https://images.unsplash.com/photo-1501504905252-473c47e087f8?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80"></p></div></div></div></div><div class="rounded-xl mb-spacing24 last:mb-0 outline duration-300 transition ease-in-out outline-1 outline-neutral-200 hover:outline-neutral-400 hover:shadow-neutralShadow hidden"><div class="cursor-pointer items-center justify-between p-4 transition-all duration-500 undefined bg-white p-spacing16 pl-spacing24 flex gap-spacing8 rounded-xl"><div class="flex text-sm font-semibold items-center overflow-x-auto"><h3 class="text-neutral-800 font-bold text-sm leading-5.5 -indent-0 pl-5 overflow-hidden line-clamp-2">22. Explain the flow in a React-Redux app?</h3></div><div class="md:w-5 md:h-5 w-6 h-6 ml-spacing8 flex items-center transition-all duration-300"><i class="icon-chevron-up-filled inline-block transition-transform duration-300 text-xl rotate-180 text-primary-main"></i></div></div><div class="overflow-hidden p-0 transition-all duration-500 ease-in-out rounded-b-xl" style="max-height:0px"><div><div class="p-spacing24 bg-white border-t border-neutral-200 faq-editor-content last:rounded-b-xl"><p></p><p>As on Redux site “<em>Redux is a predictable state container for JavaScript apps.</em>” Redux can be used separately, but it gained much popularity because it was able to solve the state problem in a React app.&nbsp;</p><p>In React to pass data(or state) between component, we use props to be passed from Parent to Children. If the data needs to be passed to Components 5 level deep then it has to just have to pass through 4 Components, which doesn’t require it. Passing data from Child to Parent is also a problem, and we need to use the Callback function. This gets complicated soon in a large application.</p><p>So, to solve this issue we maintain state, which is the main data of the application in a central location. It can be accessed by any Components which ask for it.</p><p>Let see the complete flow.</p><p><strong>The Container&nbsp;</strong>is a file that corresponds directly to a single component. It have two functions called ‘<em>mapDispatchToProps</em>’ and ‘<em>mapStateToProps</em>’.<br>As in the code below, when the Component loads we have a function call to <em>this.showPopGraphs()</em>;<br>It will go to ‘<em>mapDispatchToProps</em>’, which dispatches it to the action creator.</p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-murtyghfk" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm">import { connect } from 'react-redux';
...
...
class MiddleAge extends Component {
&nbsp; &nbsp;constructor(props) {
&nbsp; &nbsp; &nbsp; &nbsp;super(props);
&nbsp; &nbsp; &nbsp; &nbsp;this.state = {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;indPieData : [],
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;indPopTotal: '',
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;...
&nbsp; &nbsp; &nbsp; &nbsp;}
&nbsp; &nbsp; &nbsp; &nbsp;this.showPopGraphs();
&nbsp; &nbsp;}
showPopGraphs() {
&nbsp; &nbsp; &nbsp; &nbsp;this.props.init(currYear);
&nbsp; &nbsp;}
render() {
&nbsp; &nbsp; &nbsp; &nbsp;return (
...
...
)
}
const mapStateToProps = ({ dataReducer }) =&gt; ({
&nbsp; &nbsp;indPopData: dataReducer.indPopData,
});
const mapDispatchToProps = dispatch =&gt; ({
&nbsp; &nbsp;init: (currYear) =&gt; {
&nbsp; &nbsp; &nbsp; &nbsp;dispatch(populationAction.getIndPopData(currYear));
&nbsp; &nbsp;}
});
export default connect(
&nbsp; &nbsp;mapStateToProps,
&nbsp; &nbsp;mapDispatchToProps
)(MiddleAge);</pre></div></div><p><strong>The Action Creator:&nbsp;</strong>In this file, you will write the functions that dispatch an action. It performs some action, like an API call using axios. When we get the response back from it, we will dispatch an Object with “type” and “data” as <em>{ type: GET_INDIA_DATA, indPopData: response.data }</em><br>Now this will be heard by only one type of function: the reducer.</p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-5n4q22euh" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm">export const getIndPopData = (currYear) =&gt; dispatch =&gt; {
&nbsp; &nbsp;return axios.get(`<a href="http://api.population.io/1.0/population/$%7BcurrYear%7D/India/%60).then(response" rel="nofollow" target="_blank">http://api.population.io:80/1.0/population/${currYear}/India/`).then(response</a> =&gt; {
&nbsp; &nbsp; &nbsp;dispatch({ type: GET_INDIA_DATA, indPopData: response.data });
&nbsp; &nbsp;});
};</pre></div></div><p><strong>The Reducer hears</strong>: an action, and can now generate a new state based on what the action wants it to do. Note the state never actually <em>changes</em> in Redux, but instead, the reducer generates a new state which is a copy of the old state.&nbsp;</p><p>In the code below we don’t mutate the state but create a new state by Object destructuring.</p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-u7xzscnz9" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm">const initialState = {
&nbsp; &nbsp;indPopData: [],
};
const dataReducer = (state = initialState, action) =&gt; {
&nbsp; &nbsp;let newState;
&nbsp; &nbsp;switch (action.type) {
&nbsp; &nbsp; &nbsp;case types.GET_INDIA_DATA:
&nbsp; &nbsp; &nbsp; &nbsp;newState = { ...state, indPopData: action.indPopData };
&nbsp; &nbsp; &nbsp; &nbsp;break;
&nbsp; &nbsp; &nbsp;default:
&nbsp; &nbsp; &nbsp; &nbsp;newState = state;
&nbsp; &nbsp;}
&nbsp; &nbsp;return newState;
&nbsp;};</pre></div></div><p><strong>Back to Container:</strong> the result is received by “mapStateToProps”. It can be accessed as a prop ie “this.props.indPopData” in this case. Here, we are also data massaging the data in componentWillReceiveProps and storing it in local state variables “<em>indPieData”</em> and “<em>indPopTotal</em>”</p><p>After that it is rendered in the component using “this.state.indPopTotal” and “this.state.indPieData”</p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-nk4gxwtc5" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm">...
componentWillReceiveProps(nextProps) {
&nbsp; &nbsp; &nbsp; &nbsp;if (this.props.indPopData !== nextProps.indPopData) {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;this.setState({
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;indPieData: nextProps.indPopData.map(item =&gt; {return {name: item.age, value:item.total}})),
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;indPopTotal: nextProps.indPopData.map(item =&gt; {return {name: item.age, value:item.total}});
&nbsp; &nbsp; &nbsp; &nbsp;}
}
...
&nbsp; &nbsp;render() {
&nbsp; &nbsp; &nbsp; &nbsp;return (
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;Fragment&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{this.state.indPopTotal &amp;&amp; &lt;p style={totalText}&gt; India - {this.state.indPopTotal} &lt;/p&gt;}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{this.state.indPieData &amp;&amp; &lt;PopPieChart popPieData={this.state.indPieData} /&gt;}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/Fragment&gt;
&nbsp; &nbsp; &nbsp; &nbsp;)
&nbsp; &nbsp;}
const mapStateToProps = ({ dataReducer }) =&gt; ({
&nbsp; &nbsp;indPopData: dataReducer.indPopData,
&nbsp; &nbsp;...
});</pre></div></div><p></p></div></div></div></div><div class="rounded-xl mb-spacing24 last:mb-0 outline duration-300 transition ease-in-out outline-1 outline-neutral-200 hover:outline-neutral-400 hover:shadow-neutralShadow hidden"><div class="cursor-pointer items-center justify-between p-4 transition-all duration-500 undefined bg-white p-spacing16 pl-spacing24 flex gap-spacing8 rounded-xl"><div class="flex text-sm font-semibold items-center overflow-x-auto"><h3 class="text-neutral-800 font-bold text-sm leading-5.5 -indent-0 pl-5 overflow-hidden line-clamp-2">23. What is the use of middleware Redux thunk?</h3></div><div class="md:w-5 md:h-5 w-6 h-6 ml-spacing8 flex items-center transition-all duration-300"><i class="icon-chevron-up-filled inline-block transition-transform duration-300 text-xl rotate-180 text-primary-main"></i></div></div><div class="overflow-hidden p-0 transition-all duration-500 ease-in-out rounded-b-xl" style="max-height:0px"><div><div class="p-spacing24 bg-white border-t border-neutral-200 faq-editor-content last:rounded-b-xl"><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>Redux thunk is a middleware which sits between action creator and reducer in the React-Redux flow. It is very useful when we do asynchronous API calls with fetch or axios, which returns a Promise and we then dispatch it to reducer.</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>Redux thunk mainly works behind the scene. We have used some boiler-plate to use it.</span></p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-k5f9rs5xy" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm"><span class="CertTheme__tokenComment">//App.js</span><br><span class="CertTheme__tokenAttr">import</span><span> React </span><span class="CertTheme__tokenAttr">from</span><span> </span><span class="CertTheme__tokenSelector">'react'</span><span class="CertTheme__tokenPunctuation">;</span><br><span class="CertTheme__tokenAttr">import</span><span> ReactDOM </span><span class="CertTheme__tokenAttr">from</span><span> </span><span class="CertTheme__tokenSelector">'react-dom'</span><span class="CertTheme__tokenPunctuation">;</span><br><span class="CertTheme__tokenAttr">import</span><span> Routes </span><span class="CertTheme__tokenAttr">from</span><span> </span><span class="CertTheme__tokenSelector">'./routes'</span><span class="CertTheme__tokenPunctuation">;</span><br><span class="CertTheme__tokenAttr">import</span><span> store </span><span class="CertTheme__tokenAttr">from</span><span> </span><span class="CertTheme__tokenSelector">'./store'</span><span class="CertTheme__tokenPunctuation">;</span><br><span class="CertTheme__tokenAttr">import</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><span> Provider </span><span class="CertTheme__tokenPunctuation">}</span><span> </span><span class="CertTheme__tokenAttr">from</span><span> </span><span class="CertTheme__tokenSelector">'react-redux'</span><span class="CertTheme__tokenPunctuation">;</span><br><span>ReactDOM</span><span class="CertTheme__tokenPunctuation">.</span><span class="CertTheme__tokenFunction">render</span><span class="CertTheme__tokenPunctuation">(</span><br><span>&nbsp; &nbsp;</span><span class="CertTheme__tokenOperator">&lt;</span><span>Provider store</span><span class="CertTheme__tokenOperator">=</span><span class="CertTheme__tokenPunctuation">{</span><span> store </span><span class="CertTheme__tokenPunctuation">}</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="CertTheme__tokenOperator">&lt;</span><span>Routes </span><span class="CertTheme__tokenOperator">/</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp; &nbsp;</span><span class="CertTheme__tokenOperator">&lt;</span><span class="CertTheme__tokenOperator">/</span><span>Provider</span><span class="CertTheme__tokenOperator">&gt;</span><span class="CertTheme__tokenPunctuation">,</span><br><span>&nbsp;document</span><span class="CertTheme__tokenPunctuation">.</span><span class="CertTheme__tokenFunction">getElementById</span><span class="CertTheme__tokenPunctuation">(</span><span class="CertTheme__tokenSelector">'root'</span><span class="CertTheme__tokenPunctuation">)</span><br><span class="CertTheme__tokenPunctuation">)</span><span class="CertTheme__tokenPunctuation">;</span><br><span class="CertTheme__tokenComment">//store.js</span><br><span class="CertTheme__tokenAttr">import</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><span> createStore</span><span class="CertTheme__tokenPunctuation">,</span><span> applyMiddleware </span><span class="CertTheme__tokenPunctuation">}</span><span> </span><span class="CertTheme__tokenAttr">from</span><span> </span><span class="CertTheme__tokenSelector">'redux'</span><span class="CertTheme__tokenPunctuation">;</span><br><span class="CertTheme__tokenAttr">import</span><span> thunk </span><span class="CertTheme__tokenAttr">from</span><span> </span><span class="CertTheme__tokenSelector">'redux-thunk'</span><span class="CertTheme__tokenPunctuation">;</span><br><span class="CertTheme__tokenAttr">import</span><span> rootReducer </span><span class="CertTheme__tokenAttr">from</span><span> </span><span class="CertTheme__tokenSelector">'../reducer'</span><span class="CertTheme__tokenPunctuation">;</span><br><span class="CertTheme__tokenAttr">const</span><span> store </span><span class="CertTheme__tokenOperator">=</span><span> </span><span class="CertTheme__tokenFunction">createStore</span><span class="CertTheme__tokenPunctuation">(</span><span>rootReducer</span><span class="CertTheme__tokenPunctuation">,</span><span> </span><span class="CertTheme__tokenFunction">applyMiddleware</span><span class="CertTheme__tokenPunctuation">(</span><span>thunk</span><span class="CertTheme__tokenPunctuation">)</span><span class="CertTheme__tokenPunctuation">)</span><span class="CertTheme__tokenPunctuation">;</span><br><span class="CertTheme__tokenAttr">export</span><span> </span><span class="CertTheme__tokenAttr">default</span><span> store</span><span class="CertTheme__tokenPunctuation">;</span></pre></div></div><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>In </span><b><strong class="CertTheme__textBold">Question 22</strong></b><span> for React-Redux flow, in action creator, we call an API endpoint with axios. It is a network request and will take some milliseconds or more depending on the connection.</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>Now, thunk middleware sort of wait for that call, which is a Promise to completed. Once we get the response, which contains the data then only it dispatches it to the reducer.</span></p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-uuvckxykh" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm"><span class="CertTheme__tokenAttr">export</span><span> </span><span class="CertTheme__tokenAttr">const</span><span> </span><span>getIndPopData</span><span> </span><span class="CertTheme__tokenOperator">=</span><span> </span><span class="CertTheme__tokenPunctuation">(</span><span>currYear</span><span class="CertTheme__tokenPunctuation">)</span><span> </span><span class="CertTheme__tokenOperator">=&gt;</span><span> </span><span>dispatch</span><span> </span><span class="CertTheme__tokenOperator">=&gt;</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span>&nbsp; &nbsp;</span><span class="CertTheme__tokenAttr">return</span><span> axios</span><span class="CertTheme__tokenPunctuation">.</span><span class="CertTheme__tokenFunction">get</span><span class="CertTheme__tokenPunctuation">(</span><span>`</span><span class="CertTheme__tokenSelector">http://api.population.io:80/1.0/population/</span><span>${</span><span>currYear</span><span>}</span><span class="CertTheme__tokenSelector">/India/</span><span>`</span><span class="CertTheme__tokenPunctuation">)</span><span class="CertTheme__tokenPunctuation">.</span><span class="CertTheme__tokenFunction">then</span><span class="CertTheme__tokenPunctuation">(</span><span>response</span><span> </span><span class="CertTheme__tokenOperator">=&gt;</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span>&nbsp; &nbsp; &nbsp;</span><span class="CertTheme__tokenFunction">dispatch</span><span class="CertTheme__tokenPunctuation">(</span><span class="CertTheme__tokenPunctuation">{</span><span> </span><span>type</span><span class="CertTheme__tokenOperator">:</span><span> </span><span class="CertTheme__tokenProperty">GET_INDIA_DATA</span><span class="CertTheme__tokenPunctuation">,</span><span> </span><span>indPopData</span><span class="CertTheme__tokenOperator">:</span><span> response</span><span class="CertTheme__tokenPunctuation">.</span><span>data </span><span class="CertTheme__tokenPunctuation">}</span><span class="CertTheme__tokenPunctuation">)</span><span class="CertTheme__tokenPunctuation">;</span><br><span>&nbsp; &nbsp;</span><span class="CertTheme__tokenPunctuation">}</span><span class="CertTheme__tokenPunctuation">)</span><span class="CertTheme__tokenPunctuation">;</span><br><span class="CertTheme__tokenPunctuation">}</span><span class="CertTheme__tokenPunctuation">;</span></pre></div></div><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>So, Redux thunk is required in Projects where we do API calls to some endpoint.</span></p></div></div></div></div><div class="rounded-xl mb-spacing24 last:mb-0 outline duration-300 transition ease-in-out outline-1 outline-neutral-200 hover:outline-neutral-400 hover:shadow-neutralShadow hidden"><div class="cursor-pointer items-center justify-between p-4 transition-all duration-500 undefined bg-white p-spacing16 pl-spacing24 flex gap-spacing8 rounded-xl"><div class="flex text-sm font-semibold items-center overflow-x-auto"><h3 class="text-neutral-800 font-bold text-sm leading-5.5 -indent-0 pl-5 overflow-hidden line-clamp-2">24. Explain the new feature of React hooks introduced in React v16.8?</h3></div><div class="md:w-5 md:h-5 w-6 h-6 ml-spacing8 flex items-center transition-all duration-300"><i class="icon-chevron-up-filled inline-block transition-transform duration-300 text-xl rotate-180 text-primary-main"></i></div></div><div class="overflow-hidden p-0 transition-all duration-500 ease-in-out rounded-b-xl" style="max-height:0px"><div><div class="p-spacing24 bg-white border-t border-neutral-200 faq-editor-content last:rounded-b-xl"><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>As per the official React website “Hooks let you use state and other React features without writing a class.”</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>When Class based components are small then the state logic is manageable, but as the code grows the state logic becomes unmanageable. In that when we add the lifecycle components like - componentDidMount and componentDidUpdate, the logic becomes more complicated.</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>With hooks, more of React features can be used without the need for classes in a Function-based component.</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>Let’s first look into the example with class-based component.</span></p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-swsbo1apv" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm"><span class="CertTheme__tokenAttr">import</span><span> React</span><span class="CertTheme__tokenPunctuation">,</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><span> Component </span><span class="CertTheme__tokenPunctuation">}</span><span> </span><span class="CertTheme__tokenAttr">from</span><span> </span><span class="CertTheme__tokenSelector">'react'</span><span class="CertTheme__tokenPunctuation">;</span><br><span class="CertTheme__tokenAttr">import</span><span> logo </span><span class="CertTheme__tokenAttr">from</span><span> </span><span class="CertTheme__tokenSelector">'./logo.svg'</span><span class="CertTheme__tokenPunctuation">;</span><br><span class="CertTheme__tokenAttr">import</span><span> </span><span class="CertTheme__tokenSelector">'./App.css'</span><span class="CertTheme__tokenPunctuation">;</span><br><span class="CertTheme__tokenAttr">const</span><span> divStyle </span><span class="CertTheme__tokenOperator">=</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span>&nbsp;display</span><span class="CertTheme__tokenOperator">:</span><span> </span><span class="CertTheme__tokenSelector">'flex'</span><span class="CertTheme__tokenPunctuation">,</span><br><span>&nbsp;flexDirection</span><span class="CertTheme__tokenOperator">:</span><span> </span><span class="CertTheme__tokenSelector">'column'</span><span class="CertTheme__tokenPunctuation">,</span><br><span>&nbsp;justifyContent</span><span class="CertTheme__tokenOperator">:</span><span> </span><span class="CertTheme__tokenSelector">'center'</span><span class="CertTheme__tokenPunctuation">,</span><br><span>&nbsp;alignItems</span><span class="CertTheme__tokenOperator">:</span><span> </span><span class="CertTheme__tokenSelector">'center'</span><span class="CertTheme__tokenPunctuation">,</span><br><span>&nbsp;border</span><span class="CertTheme__tokenOperator">:</span><span> </span><span class="CertTheme__tokenSelector">'5px solid pink'</span><br><span class="CertTheme__tokenPunctuation">}</span><span class="CertTheme__tokenPunctuation">;</span><br><br><br><br><span class="CertTheme__tokenAttr">class</span><span> </span><span class="CertTheme__tokenFunction">App</span><span> </span><span class="CertTheme__tokenAttr">extends</span><span> </span><span class="CertTheme__tokenFunction">Component</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span>&nbsp;</span><span class="CertTheme__tokenFunction">constructor</span><span class="CertTheme__tokenPunctuation">(</span><span class="CertTheme__tokenPunctuation">)</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span>&nbsp; &nbsp;</span><span class="CertTheme__tokenAttr">super</span><span class="CertTheme__tokenPunctuation">(</span><span class="CertTheme__tokenPunctuation">)</span><span class="CertTheme__tokenPunctuation">;</span><br><span>&nbsp; &nbsp;</span><span class="CertTheme__tokenAttr">this</span><span class="CertTheme__tokenPunctuation">.</span><span>state </span><span class="CertTheme__tokenOperator">=</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span>&nbsp; &nbsp; &nbsp;count</span><span class="CertTheme__tokenOperator">:</span><span> </span><span class="CertTheme__tokenProperty">0</span><br><span>&nbsp; &nbsp;</span><span class="CertTheme__tokenPunctuation">}</span><br><span>&nbsp; &nbsp;</span><span class="CertTheme__tokenAttr">this</span><span class="CertTheme__tokenPunctuation">.</span><span>setCount </span><span class="CertTheme__tokenOperator">=</span><span> </span><span class="CertTheme__tokenAttr">this</span><span class="CertTheme__tokenPunctuation">.</span><span class="CertTheme__tokenFunction">setCount</span><span class="CertTheme__tokenPunctuation">.</span><span class="CertTheme__tokenFunction">bind</span><span class="CertTheme__tokenPunctuation">(</span><span class="CertTheme__tokenAttr">this</span><span class="CertTheme__tokenPunctuation">)</span><span class="CertTheme__tokenPunctuation">;</span><br><span>&nbsp;</span><span class="CertTheme__tokenPunctuation">}</span><br><span>&nbsp;</span><span class="CertTheme__tokenFunction">setCount</span><span class="CertTheme__tokenPunctuation">(</span><span class="CertTheme__tokenPunctuation">)</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span>&nbsp; &nbsp;</span><span class="CertTheme__tokenAttr">this</span><span class="CertTheme__tokenPunctuation">.</span><span class="CertTheme__tokenFunction">setState</span><span class="CertTheme__tokenPunctuation">(</span><span class="CertTheme__tokenPunctuation">{</span><br><span>&nbsp; &nbsp; &nbsp;count</span><span class="CertTheme__tokenOperator">:</span><span> </span><span class="CertTheme__tokenAttr">this</span><span class="CertTheme__tokenPunctuation">.</span><span>state</span><span class="CertTheme__tokenPunctuation">.</span><span>count </span><span class="CertTheme__tokenOperator">+</span><span> </span><span class="CertTheme__tokenProperty">1</span><br><span>&nbsp; &nbsp;</span><span class="CertTheme__tokenPunctuation">}</span><span class="CertTheme__tokenPunctuation">)</span><br><span>&nbsp;</span><span class="CertTheme__tokenPunctuation">}</span><br><span>&nbsp;</span><span class="CertTheme__tokenFunction">render</span><span class="CertTheme__tokenPunctuation">(</span><span class="CertTheme__tokenPunctuation">)</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span>&nbsp; &nbsp;</span><span class="CertTheme__tokenAttr">return</span><span> </span><span class="CertTheme__tokenPunctuation">(</span><br><span>&nbsp; &nbsp; &nbsp;</span><span class="CertTheme__tokenOperator">&lt;</span><span>div style</span><span class="CertTheme__tokenOperator">=</span><span class="CertTheme__tokenPunctuation">{</span><span>divStyle</span><span class="CertTheme__tokenPunctuation">}</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="CertTheme__tokenOperator">&lt;</span><span>img src</span><span class="CertTheme__tokenOperator">=</span><span class="CertTheme__tokenPunctuation">{</span><span>logo</span><span class="CertTheme__tokenPunctuation">}</span><span> className</span><span class="CertTheme__tokenOperator">=</span><span class="CertTheme__tokenSelector">"App-logo"</span><span> alt</span><span class="CertTheme__tokenOperator">=</span><span class="CertTheme__tokenSelector">"logo"</span><span> </span><span class="CertTheme__tokenOperator">/</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="CertTheme__tokenOperator">&lt;</span><span>p</span><span class="CertTheme__tokenOperator">&gt;</span><span>You clicked </span><span class="CertTheme__tokenPunctuation">{</span><span class="CertTheme__tokenAttr">this</span><span class="CertTheme__tokenPunctuation">.</span><span>state</span><span class="CertTheme__tokenPunctuation">.</span><span>count</span><span class="CertTheme__tokenPunctuation">}</span><span> times</span><span class="CertTheme__tokenOperator">&lt;</span><span class="CertTheme__tokenOperator">/</span><span>p</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="CertTheme__tokenOperator">&lt;</span><span>button onClick</span><span class="CertTheme__tokenOperator">=</span><span class="CertTheme__tokenPunctuation">{</span><span class="CertTheme__tokenAttr">this</span><span class="CertTheme__tokenPunctuation">.</span><span>setCount</span><span class="CertTheme__tokenPunctuation">}</span><span class="CertTheme__tokenOperator">&gt;</span><span>Click me</span><span class="CertTheme__tokenOperator">&lt;</span><span class="CertTheme__tokenOperator">/</span><span>button</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp; &nbsp; &nbsp;</span><span class="CertTheme__tokenOperator">&lt;</span><span class="CertTheme__tokenOperator">/</span><span>div</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp; &nbsp;</span><span class="CertTheme__tokenPunctuation">)</span><br><span>&nbsp;</span><span class="CertTheme__tokenPunctuation">}</span><br><span class="CertTheme__tokenPunctuation">}</span><br><span class="CertTheme__tokenAttr">export</span><span> </span><span class="CertTheme__tokenAttr">default</span><span> App</span><span class="CertTheme__tokenPunctuation">;</span></pre></div></div><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>It will output a simple button, which on click will increase the count.</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><img alt="increase the count" loading="lazy" width="100" height="100" decoding="async"  class="" style="color:transparent;width:100%;height:auto;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url(&quot;data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3C/filter%3E%3Cimage preserveAspectRatio='none' filter='url(%23b)' x='0' y='0' height='100%25' width='100%25' href='data:image/svg+xml;base64,CiAgPHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxkZWZzPgogICAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImciPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNjY2MiIG9mZnNldD0iMjAlIiAvPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNkZGQiIG9mZnNldD0iNTAlIiAvPgogICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNlZWUiIG9mZnNldD0iNzAlIiAvPgogICAgICA8L2xpbmVhckdyYWRpZW50PgogICAgPC9kZWZzPgogICAgPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9IiNlZWUiIC8+CiAgICA8cmVjdCBpZD0iciIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjZykiIC8+CiAgICA8YW5pbWF0ZSB4bGluazpocmVmPSIjciIgYXR0cmlidXRlTmFtZT0ieCIgZnJvbT0iLTEwMCIgdG89IjEwMCIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiICAvPgogIDwvc3ZnPg=='/%3E%3C/svg%3E&quot;)" sizes="(min-width: 767px) 50vw, 100vw" srcSet="" src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80"></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>Now let's change the code to use hook.</span></p><div class="jsx-189f2d4cbe17d436 code-block-wrapper mt-spacing10 mb-[16.8px] md:mb-[24px] bg-black p-4 rounded-[12px] relative text-[#708090] overflow-hidden"><div class="jsx-189f2d4cbe17d436 absolute top-4 right-4 z-10"><div class="jsx-189f2d4cbe17d436 px-spacing12 bg-white rounded-full h-10 flex items-center cursor-pointer"><i class="jsx-189f2d4cbe17d436 text-black text-sm icon-copy"></i></div></div><div class="jsx-189f2d4cbe17d436 overflow-x-auto pb-[12px] w-full"><pre id="code-block-heg46jial" class="jsx-189f2d4cbe17d436 whitespace-pre-wrap break-words w-full font-mono text-sm"><span class="CertTheme__tokenAttr">import</span><span> React</span><span class="CertTheme__tokenPunctuation">,</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><span> useState </span><span class="CertTheme__tokenPunctuation">}</span><span> </span><span class="CertTheme__tokenAttr">from</span><span> </span><span class="CertTheme__tokenSelector">'react'</span><span class="CertTheme__tokenPunctuation">;</span><br><span class="CertTheme__tokenAttr">import</span><span> logo </span><span class="CertTheme__tokenAttr">from</span><span> </span><span class="CertTheme__tokenSelector">'./logo.svg'</span><span class="CertTheme__tokenPunctuation">;</span><br><span class="CertTheme__tokenAttr">import</span><span> </span><span class="CertTheme__tokenSelector">'./App.css'</span><span class="CertTheme__tokenPunctuation">;</span><br><span class="CertTheme__tokenAttr">const</span><span> divStyle </span><span class="CertTheme__tokenOperator">=</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span>&nbsp;display</span><span class="CertTheme__tokenOperator">:</span><span> </span><span class="CertTheme__tokenSelector">'flex'</span><span class="CertTheme__tokenPunctuation">,</span><br><span>&nbsp;flexDirection</span><span class="CertTheme__tokenOperator">:</span><span> </span><span class="CertTheme__tokenSelector">'column'</span><span class="CertTheme__tokenPunctuation">,</span><br><span>&nbsp;justifyContent</span><span class="CertTheme__tokenOperator">:</span><span> </span><span class="CertTheme__tokenSelector">'center'</span><span class="CertTheme__tokenPunctuation">,</span><br><span>&nbsp;alignItems</span><span class="CertTheme__tokenOperator">:</span><span> </span><span class="CertTheme__tokenSelector">'center'</span><span class="CertTheme__tokenPunctuation">,</span><br><span>&nbsp;border</span><span class="CertTheme__tokenOperator">:</span><span> </span><span class="CertTheme__tokenSelector">'5px solid pink'</span><br><span class="CertTheme__tokenPunctuation">}</span><span class="CertTheme__tokenPunctuation">;</span><br><span class="CertTheme__tokenAttr">const</span><span> </span><span>App</span><span> </span><span class="CertTheme__tokenOperator">=</span><span> </span><span class="CertTheme__tokenPunctuation">(</span><span class="CertTheme__tokenPunctuation">)</span><span> </span><span class="CertTheme__tokenOperator">=&gt;</span><span> </span><span class="CertTheme__tokenPunctuation">{</span><br><span>&nbsp; &nbsp;</span><span class="CertTheme__tokenComment">// Declare a new state variable, which we'll call "count"</span><br><span>&nbsp; &nbsp;</span><span class="CertTheme__tokenAttr">const</span><span> </span><span class="CertTheme__tokenPunctuation">[</span><span>count</span><span class="CertTheme__tokenPunctuation">,</span><span> setCount</span><span class="CertTheme__tokenPunctuation">]</span><span> </span><span class="CertTheme__tokenOperator">=</span><span> </span><span class="CertTheme__tokenFunction">useState</span><span class="CertTheme__tokenPunctuation">(</span><span class="CertTheme__tokenProperty">0</span><span class="CertTheme__tokenPunctuation">)</span><br><span>&nbsp; &nbsp;</span><span class="CertTheme__tokenAttr">return</span><span> </span><span class="CertTheme__tokenPunctuation">(</span><br><span>&nbsp; &nbsp; &nbsp;</span><span class="CertTheme__tokenOperator">&lt;</span><span>div style</span><span class="CertTheme__tokenOperator">=</span><span class="CertTheme__tokenPunctuation">{</span><span>divStyle</span><span class="CertTheme__tokenPunctuation">}</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="CertTheme__tokenOperator">&lt;</span><span>img src</span><span class="CertTheme__tokenOperator">=</span><span class="CertTheme__tokenPunctuation">{</span><span>logo</span><span class="CertTheme__tokenPunctuation">}</span><span> className</span><span class="CertTheme__tokenOperator">=</span><span class="CertTheme__tokenSelector">"App-logo"</span><span> alt</span><span class="CertTheme__tokenOperator">=</span><span class="CertTheme__tokenSelector">"logo"</span><span> </span><span class="CertTheme__tokenOperator">/</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="CertTheme__tokenOperator">&lt;</span><span>p</span><span class="CertTheme__tokenOperator">&gt;</span><span>You clicked </span><span class="CertTheme__tokenPunctuation">{</span><span>count</span><span class="CertTheme__tokenPunctuation">}</span><span> times</span><span class="CertTheme__tokenOperator">&lt;</span><span class="CertTheme__tokenOperator">/</span><span>p</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="CertTheme__tokenOperator">&lt;</span><span>button onClick</span><span class="CertTheme__tokenOperator">=</span><span class="CertTheme__tokenPunctuation">{</span><span class="CertTheme__tokenPunctuation">(</span><span class="CertTheme__tokenPunctuation">)</span><span> </span><span class="CertTheme__tokenOperator">=&gt;</span><span> </span><span class="CertTheme__tokenFunction">setCount</span><span class="CertTheme__tokenPunctuation">(</span><span>count </span><span class="CertTheme__tokenOperator">+</span><span> </span><span class="CertTheme__tokenProperty">1</span><span class="CertTheme__tokenPunctuation">)</span><span class="CertTheme__tokenPunctuation">}</span><span class="CertTheme__tokenOperator">&gt;</span><span>Click me</span><span class="CertTheme__tokenOperator">&lt;</span><span class="CertTheme__tokenOperator">/</span><span>button</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp; &nbsp; &nbsp;</span><span class="CertTheme__tokenOperator">&lt;</span><span class="CertTheme__tokenOperator">/</span><span>div</span><span class="CertTheme__tokenOperator">&gt;</span><br><span>&nbsp; &nbsp;</span><span class="CertTheme__tokenPunctuation">)</span><br><span class="CertTheme__tokenPunctuation">}</span><br><span class="CertTheme__tokenAttr">export</span><span> </span><span class="CertTheme__tokenAttr">default</span><span> App</span><span class="CertTheme__tokenPunctuation">;</span></pre></div></div><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>The keyword useState is our Hook. This code very much cleaner and understandable than that of the Class based component.</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>We call it inside a functional component to add a state to it. React will preserve this state for us. useState always returns a pair which has the </span><i><em class="CertTheme__textItalic">current</em></i><span> state value and a function that will lets us to update the state value.</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>We then call this function from an event handler onClick. It’s similar to this.setState in a React class.</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>The argument in useState is used to set the initial state. In our example given above, the initial state is 0, as our counter starts from zero.</span></p></div></div></div></div><div class="relative"><div class="mt-spacing20 z-10 relative text-center flex justify-center mt-0"><button class="flex items-center gap-x-spacing8 py-spacing4"><span class="text-sm underline font-semibold text-mono-black">View all questions</span><i class="icon-chevron-down-double text-xl leading-5 text-neutral-800"></i></button></div><div class="absolute bottom-0 block h-32 w-full bg-gradient-to-t from-subdued/100 from-30% md:from-40%"></div></div></div></div></div></div></div></div></div></div></div></section></div></div><div class="sticky top-0 self-start max-h-screen overflow-y-auto w-full"><div class="w-full overflow-hidden pt-spacing32"><div class="px-spacing16 py-spacing20 rounded-xl border border-neutral-200 bg-white"><div class=""><h5 class="text-lg leading-6 text-mono-black font-bold">Want to Know More?</h5></div><form novalidate="" class="pt-spacing20 w-full"><div class="mb-spacing12"><div class=" relative  w-full  group h-11 flex direction-row justify-between rounded-lg border-none
    hover:border-neutral-400  shadow-customShad focus:border-neutral-600 focus:shadow-neutral "><input type="text" placeholder="full Name" class="w-full h-full  text-sm text-neutral-800 placeholder-transparent leading-5.5 pl-4 pr-8 rounded-lg border-1 peer  focus:outline-none border-neutral-200 hover:border-neutral-400 focus:border-neutral-600 focus:shadow-neutral" name="fullName"><label class="absolute  left-3 -top-2 border-r-none text-sm transition-all peer-focus:-top-2 peer-focus:text-sm pointer-events-none pr-3.75 pl-1  bg-white 
          text-neutral-500 peer-placeholder-shown:text-sm peer-placeholder-shown:text-neutral-500 peer-placeholder-shown:top-3 peer-focus:text-neutral-500 peer-placeholder-shown:leading-5">Full Name<span class="text-red-500 ml-spacing4 pt-0.8 absolute">*</span></label></div></div><div class="mb-spacing12"><div class=" relative  w-full  group h-11 flex direction-row justify-between rounded-lg border-none
    hover:border-neutral-400  shadow-customShad focus:border-neutral-600 focus:shadow-neutral "><input type="text" placeholder="Email" class="w-full h-full text-sm text-neutral-800 leading-5.5 pl-4 pr-8 rounded-lg border-1 peer focus:outline-none border-neutral-200 hover:border-neutral-400 focus:border-neutral-600 focus:shadow-neutral placeholder-transparent" name="email"><label class="absolute  left-3 -top-2 border-r-none text-sm transition-all peer-focus:-top-2 peer-focus:text-sm pointer-events-none pr-3.75 pl-1 bg-white 
          text-neutral-500 peer-placeholder-shown:text-sm peer-placeholder-shown:text-neutral-500 peer-placeholder-shown:top-3 peer-focus:text-neutral-500 peer-placeholder-shown:leading-5">Email<span class="text-red-500 ml-spacing4 pt-0.8 absolute">*</span></label></div></div><div class="mb-spacing16"><div><div class="flex h-11 relative focus-within:shadow-neutral focus-within:border-neutral-600 rounded-lg border-1  focus:placeholder-transparent hover:border-neutral-400 focus:border-neutral-600 focus:shadow-neutral focus:outline-none border-neutral-200 shadow-customShad "><div class="p-3 cursor-pointer m-1 flex justify-center items-center rounded-r-lg !w-auto !px-0 !pr-2 !pl-3 leading-6 w-fit border-neutral-200 rounded-l-lg border-none hover:border-neutral-400 focus:border-neutral-600 focus:shadow-neutral focus:outline-none"><div class="pr-1 font-bold text-base text-blackDar"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342"><path fill="#181A93" d="M17.3 0h478.4v342H17.3V0z"></path><path fill="#FFA44A" d="M0 0h513v114H0V0z"></path><path fill="#1A9F0B" d="M0 228h513v114H0V228z"></path><path fill="white" d="M0 114h513v114H0V114z"></path><circle fill="white" cx="256.5" cy="171" r="34.2"></circle><path fill="#181A93" d="M256.5 216.6c-25.1 0-45.6-20.5-45.6-45.6s20.5-45.6 45.6-45.6 45.6 20.5 45.6 45.6-20.5 45.6-45.6 45.6zm0-11.4c18.2 0 34.2-16 34.2-34.2s-15.9-34.2-34.2-34.2-34.2 16-34.2 34.2 16 34.2 34.2 34.2z"></path><circle fill="#181A93" cx="256.5" cy="171" r="22.8"></circle></svg></div><div class="pl-spacing4 text-xs w-6 items-center text-neutral-700 font-semibold">+91</div></div></div><i class="icon-chevron-right text-base rotate-90 leading-4 ml-spacing12"></i></div><input type="text" class="hidden" name="isd" value="+91"><div class="w-full"><div class="inline-block bg-white border-none undefined h-full w-full border-neutral-200 rounded-lg border-1 shadow-customShad group hover:border-neutral-400 focus:border-neutral-600 focus:shadow-neutral focus:outline-none"><input type="text" class="w-full h-full text-sm text-neutral-800 leading-5.5 px-spacing12 border-neutral-200 rounded-r-lg border-none peer focus:outline-none " placeholder="  " name="number"><label class="absolute  bg-white placeholder-transparent left-3 -top-2 text-sm transition-all peer-focus:-top-2 peer-focus:left-3 peer-focus:text-sm pointer-events-none  pr-3.75 pl-1 bg-white 
          text-neutral-500 peer-placeholder-shown:text-sm peer-placeholder-shown:text-neutral-500 peer-placeholder-shown:top-3 peer-focus:text-neutral-500 peer-placeholder-shown:leading-5 peer-placeholder-shown:left-24">Phone Number<span class="text-red-500 ml-spacing4 absolute pt-0.8">*</span></label></div></div></div><div class="max-w-61 !w-auto pt-spacing4 ml-3.5 md:mr-0 mr-4.25 bg-white absolute z-99 h-68 customized-scrollbar overflow-y-scroll border-1 text-xs border-neutral-400 rounded-lg hidden !ml-0"><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342"><path fill="white" d="M0 0h513v342H0z"></path><g fill="#D80027"><path d="M0 0h513v38H0zM0 76h513v38H0zM0 152h513v38H0zM0 228h513v38H0zM0 304h513v38H0z"></path></g><path fill="#2E52B2" d="M0 0h256.5v190H0z"></path><g fill="white"><path d="M47.8 141.9l-4-12.8-4.3 12.8H26.3l10.7 7.7-4 12.8 10.8-7.9 10.7 7.9-4.2-12.8 10.9-7.7zM104.2 141.9l-4.1-12.8-4.2 12.8H82.7l10.7 7.7-4.1 12.8 10.8-7.9 10.7 7.9-4-12.8 10.8-7.7zM160.6 141.9l-4.2-12.8-4 12.8h-13.5l10.9 7.7-4.2 12.8 10.8-7.9 10.9 7.9-4.2-12.8 10.8-7.7zM216.9 141.9l-4.1-12.8-4.2 12.8h-13.2l10.7 7.7-4 12.8 10.7-7.9 10.8 7.9-4.2-12.8 10.9-7.7zM100.1 78.3l-4.2 12.8H82.7L93.4 99l-4.1 12.6 10.8-7.8 10.7 7.8-4-12.6 10.8-7.9h-13.4zM43.8 78.3l-4.3 12.8H26.3L37 99l-4 12.6 10.8-7.8 10.7 7.8L50.3 99l10.9-7.9H47.8zM156.4 78.3l-4 12.8h-13.5l10.9 7.9-4.2 12.6 10.8-7.8 10.9 7.8-4.2-12.6 10.8-7.9h-13.3zM212.8 78.3l-4.2 12.8h-13.2l10.7 7.9-4 12.6 10.7-7.8 10.8 7.8-4.2-12.6 10.9-7.9h-13.4zM43.8 27.7l-4.3 12.6H26.3L37 48.2l-4 12.7L43.8 53l10.7 7.9-4.2-12.7 10.9-7.9H47.8zM100.1 27.7l-4.2 12.6H82.7l10.7 7.9-4.1 12.7 10.8-7.9 10.7 7.9-4-12.7 10.8-7.9h-13.4zM156.4 27.7l-4 12.6h-13.5l10.9 7.9-4.2 12.7 10.8-7.9 10.9 7.9-4.2-12.7 10.8-7.9h-13.3zM212.8 27.7l-4.2 12.6h-13.2l10.7 7.9-4 12.7 10.7-7.9 10.8 7.9-4.2-12.7 10.9-7.9h-13.4z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">United States +1</div></div></div><div class="bg-mono-black/8 pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342"><path fill="#181A93" d="M17.3 0h478.4v342H17.3V0z"></path><path fill="#FFA44A" d="M0 0h513v114H0V0z"></path><path fill="#1A9F0B" d="M0 228h513v114H0V228z"></path><path fill="white" d="M0 114h513v114H0V114z"></path><circle fill="white" cx="256.5" cy="171" r="34.2"></circle><path fill="#181A93" d="M256.5 216.6c-25.1 0-45.6-20.5-45.6-45.6s20.5-45.6 45.6-45.6 45.6 20.5 45.6 45.6-20.5 45.6-45.6 45.6zm0-11.4c18.2 0 34.2-16 34.2-34.2s-15.9-34.2-34.2-34.2-34.2 16-34.2 34.2 16 34.2 34.2 34.2z"></path><circle fill="#181A93" cx="256.5" cy="171" r="22.8"></circle></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">India +91</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 341.3"><path fill="white" d="M0 0h512v341.3H0z"></path><g fill="#D80027"><path d="M0 0h142v341.3H0zM370 0h142v341.3H370zM306.5 206l50.4-25.2-25.2-12.6V143l-50.4 25.2 25.2-50.4h-25.2L256.1 80l-25.2 37.8h-25.2l25.2 50.4-50.4-25.2v25.2l-25.2 12.6 50.4 25.2-12.6 25.2h50.4V269h25.2v-37.8h50.4z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Canada +1</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342"><path fill="#0052B4" d="M0 0h513v342H0z"></path><g fill="white"><path d="M222.2 170.7c.3-.3.5-.6.8-.9-.2.3-.5.6-.8.9zM188 212.6l11 22.9 24.7-5.7-11 22.8 19.9 15.8-24.8 5.6.1 25.4-19.9-15.9-19.8 15.9.1-25.4-24.8-5.6 19.9-15.8-11.1-22.8 24.8 5.7zM385.9 241.1l5.2 10.9 11.8-2.7-5.3 10.9 9.5 7.5-11.8 2.6v12.2l-9.4-7.6-9.5 7.6.1-12.2-11.8-2.6 9.5-7.5-5.3-10.9 11.8 2.7zM337.3 125.1l5.2 10.9 11.8-2.7-5.3 10.9 9.5 7.5-11.8 2.7v12.1l-9.4-7.6-9.5 7.6.1-12.1-11.9-2.7 9.5-7.5-5.3-10.9L332 136zM385.9 58.9l5.2 10.9 11.8-2.7-5.3 10.9 9.5 7.5-11.8 2.7v12.1l-9.4-7.6-9.5 7.6.1-12.1-11.8-2.7 9.5-7.5-5.3-10.9 11.8 2.7zM428.4 108.6l5.2 10.9 11.8-2.7-5.3 10.9 9.5 7.5-11.8 2.6V150l-9.4-7.6-9.5 7.6v-12.2l-11.8-2.6 9.5-7.5-5.3-10.9 11.8 2.7zM398 166.5l4.1 12.7h13.3l-10.8 7.8 4.2 12.7-10.8-7.9-10.8 7.9 4.1-12.7-10.7-7.8h13.3z"></path><path d="M254.8 0v30.6l-45.1 25.1h45.1V115h-59.1l59.1 32.8v22.9h-26.7l-73.5-40.9v40.9H99v-48.6l-87.4 48.6H-1.2v-30.6L44 115H-1.2V55.7h59.1L-1.2 22.8V0h26.7L99 40.8V0h55.6v48.6L242.1 0z"></path></g><path fill="#D80027" d="M142.8 0h-32v69.3h-112v32h112v69.4h32v-69.4h112v-32h-112z"></path><path fill="#0052B4" d="M154.6 115l100.2 55.7v-15.8L183 115z"></path><path fill="white" d="M154.6 115l100.2 55.7v-15.8L183 115z"></path><g fill="#D80027"><path d="M154.6 115l100.2 55.7v-15.8L183 115zM70.7 115l-71.9 39.9v15.8L99 115z"></path></g><path fill="#0052B4" d="M99 55.7L-1.2 0v15.7l71.9 40z"></path><path fill="white" d="M99 55.7L-1.2 0v15.7l71.9 40z"></path><g fill="#D80027"><path d="M99 55.7L-1.2 0v15.7l71.9 40zM183 55.7l71.8-40V0L154.6 55.7z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Australia +61</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="white" d="M0 85.337h512v341.326H0z"></path><path fill="#D80027" d="M0 85.337h512V256H0z"></path><g fill="white"><path d="M83.478 170.666c0-24.865 17.476-45.637 40.812-50.734a52.059 52.059 0 00-11.13-1.208c-28.688 0-51.942 23.254-51.942 51.941s23.255 51.942 51.942 51.942c3.822 0 7.543-.425 11.13-1.208-23.336-5.095-40.812-25.867-40.812-50.733zM150.261 122.435l3.684 11.337h11.921l-9.645 7.007 3.684 11.337-9.644-7.006-9.645 7.006 3.685-11.337-9.645-7.007h11.921z"></path><path d="M121.344 144.696l3.683 11.337h11.921l-9.645 7.007 3.684 11.337-9.643-7.006-9.645 7.006 3.685-11.337-9.645-7.007h11.921zM179.178 144.696l3.684 11.337h11.921l-9.645 7.007 3.684 11.337-9.644-7.006-9.644 7.006 3.685-11.337-9.645-7.007h11.921zM168.047 178.087l3.684 11.337h11.921l-9.644 7.007 3.684 11.337-9.645-7.006-9.643 7.006 3.684-11.337-9.644-7.007h11.92zM132.474 178.087l3.683 11.337h11.921l-9.644 7.007 3.684 11.337-9.644-7.006-9.644 7.006 3.684-11.337-9.644-7.007h11.92z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Singapore +65</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#0052B4" d="M0 85.334h512v341.337H0z"></path><g fill="#D80027"><path d="M425.301 233.745l3.388 10.428h10.963l-8.87 6.444 3.388 10.427-8.869-6.444-8.871 6.444 3.388-10.427-8.87-6.444h10.963zM386.107 308.817l5.083 15.642h16.445l-13.305 9.667 5.082 15.64-13.305-9.667-13.305 9.667 5.083-15.64-13.305-9.667h16.445zM387.588 185.971l4.236 13.036h13.704l-11.088 8.054 4.235 13.034-11.087-8.056-11.088 8.056 4.235-13.034-11.087-8.054h13.704zM349.876 233.291l5.082 15.641h16.446l-13.306 9.666 5.084 15.641-13.306-9.666-13.305 9.666 5.082-15.641-13.305-9.666h16.445z"></path></g><path fill="white" d="M256.003 85.329v30.564l-45.178 25.088h45.178v59.359H196.89l59.113 32.846v22.806h-26.69l-73.484-40.826v40.826h-55.652v-48.573l-87.429 48.573H.003v-30.553l45.168-25.099H.003v-59.359h59.103L.003 108.147V85.329h26.68l73.494 40.838V85.329h55.652v48.573l87.43-48.573z"></path><path fill="#D80027" d="M144 85.33h-32v69.334H0v32h112v69.334h32v-69.334h112v-32H144z"></path><path fill="#0052B4" d="M155.826 200.344L256 255.998v-15.739l-71.847-39.915z"></path><path fill="white" d="M155.826 200.344L256 255.998v-15.739l-71.847-39.915z"></path><g fill="#D80027"><path d="M155.826 200.344L256 255.998v-15.739l-71.847-39.915zM71.846 200.344L0 240.259v15.739l100.174-55.654z"></path></g><path fill="#0052B4" d="M100.174 140.983L0 85.33v15.738l71.847 39.915z"></path><path fill="white" d="M100.174 140.983L0 85.33v15.738l71.847 39.915z"></path><g fill="#D80027"><path d="M100.174 140.983L0 85.33v15.738l71.847 39.915zM184.154 140.983L256 101.068V85.33l-100.174 55.653z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">New Zealand +64</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#D80027" d="M0 85.331h512v341.337H0z"></path><path d="M0 85.331h512v113.775H0z"></path><path fill="#FFDA44" d="M0 312.882h512v113.775H0z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Germany +49</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342"><path fill="white" d="M0 0h513v342H0z"></path><path fill="#6DA544" d="M0 0h513v114H0z"></path><path d="M0 228h513v114H0z"></path><path fill="#dd0d12" d="M0 0h171v342H0z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">United Arab Emirates +971</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342"><path fill="#D80027" d="M0 0h513v342H0z"></path><g fill="white"><path d="M274.2 119.8c-5.1 21.1-14.1 17.1-18.5 35.5-26.1-6.3-42.1-32.5-35.9-58.6 6.3-26.1 32.5-42.1 58.5-35.9-8.7 36.9.5 40.1-4.1 59zM206.6 135.4c18.5 11.3 11.9 18.7 28 28.6-14 22.9-43.9 30-66.8 16s-30-43.9-16-66.8c32.3 19.8 38.2 12.1 54.8 22.2zM200.6 204.6c16.5-14.1 21.4-5.5 35.8-17.8 17.4 20.4 15 51-5.4 68.4-20.4 17.4-51 15-68.4-5.4 28.7-24.6 23.2-32.6 38-45.2zM264.5 231.7c-8.3-20.1 1.4-22.1-5.9-39.6 24.8-10.3 53.2 1.5 63.4 26.3 10.3 24.8-1.5 53.2-26.3 63.4-14.5-35-23.8-32.2-31.2-50.1zM310 179.3c-21.6 1.7-20.6-8.1-39.5-6.6-2.1-26.7 17.9-50.1 44.6-52.2 26.7-2.1 50.1 17.9 52.2 44.6-37.7 2.9-37.9 12.7-57.3 14.2z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Hong Kong +852</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="white" d="M0 85.331h512v341.326H0z"></path><path fill="#6DA544" d="M0 85.331h170.663v341.337H0z"></path><path fill="#FF9811" d="M341.337 85.331H512v341.337H341.337z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Ireland +353</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342"><path fill="#DB3E00" d="M0 0h513v342H0z"></path><path fill="#479900" d="M331 0h182v342H331z"></path><path d="M0 0h181.8v342H0z"></path><path fill="white" d="M256 126.7c-19.4 0-35.2 15.8-35.2 35.2v52.8h70.4v-52.8c0-19.5-15.8-35.2-35.2-35.2z"></path><path fill="white" d="M256 84.3c-47.7 0-86.4 38.7-86.4 86.4S208.3 257 256 257s86.4-38.7 86.4-86.4-38.7-86.3-86.4-86.3zm0 157.7c-39.4 0-71.4-32-71.4-71.4 0-39.4 32-71.4 71.4-71.4 39.4 0 71.4 32 71.4 71.4 0 39.5-32 71.4-71.4 71.4z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Afghanistan +93</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342"><path fill="#0052B4" d="M0 0h513v342H0z"></path><path fill="#FFDA44" d="M513 210.9H202.2V342h-79.8V210.9H0V131.1h122.4V0h79.8v131.1H513v61.2z"></path><path fill="#D80027" d="M513 149.7v42.6H183.7V342H141V192.3H0v-42.6h141V0h42.7v149.7z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Aland Islands +358</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 60"><path fill="#ED2024" d="M0 0h90v60H0z"></path><path fill="#212121" d="M32.5 12.2v16l7.1 2.5-5 4.9 2.4 3 5.3-5.5 1.2 2.3-3 4.9 3.6 5.6-1.8 2.6 2.8 3.6 2.7-3.7-1.5-2.6 3-5.8-2.7-4.6 1.2-2.3 5.2 5.5 2.5-2.9-5.2-5.1 7.2-2.6V12.2l-5.2 1.9-.1 3.8-3.3.3v-2.6l1.7-2.3 5.6-2.2-2.3-.4 1.4-1.2.9.4-.8-1.4L54 9l-1-1.1L47.5 9l1.4 1.1-3.8 4.9-3.8-4.8 1.3-1.1-5-1.2L36.2 9l-1.5-.4-.8 1.4.9-.6 1.6 1.1-2.3.5 5.5 2 1.6 2.3v2.9l-3.3-.3v-3.6z"></path><g fill="#212121"><path d="M26.2 25h6.4v2.5h-6.4zM26.2 20.9h6.4v2.7h-6.4zM26.2 16.7h6.4v2.6h-6.4zM26.2 12.7h6.4v2.5h-6.4z"></path></g><g fill="#212121"><path d="M57.4 25h6.4v2.5h-6.4zM57.4 20.9h6.4v2.7h-6.4zM57.4 16.7h6.4v2.6h-6.4zM57.4 12.7h6.4v2.5h-6.4z"></path></g><path fill="#212121" d="M53.4 36.1h6.4V38h-6.4zM30.2 36.1h6.4V38h-6.4z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Albania +355</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 341.3"><path fill="#41662E" d="M0 0h512v341.3H0z"></path><path fill="white" d="M256 0h256v341.3H256z"></path><g fill="#D80027"><path d="M341.5 105.3l-29.4 40.4-47.5-15.4 29.4 40.4-29.4 40.4 47.5-15.4 29.4 40.4v-50l47.5-15.5-47.5-15.4z"></path><path d="M309.9 276.7c-58.5 0-106-47.5-106-106s47.5-106 106-106c18.3 0 35.4 4.6 50.4 12.7-23.5-23-55.7-37.2-91.2-37.2-72 0-130.4 58.4-130.4 130.4S197.1 301 269.1 301c35.5 0 67.7-14.2 91.2-37.2-14.9 8.2-32.1 12.9-50.4 12.9z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Algeria +213</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342"><path fill="#0052B4" d="M0 0h513v342H0z"></path><path fill="#D80027" d="M513 33L95.3 171 513 310.76v30.57L0 171 513 0z"></path><path fill="white" d="M513 287.18v24.58L81.72 171 513 30v24.16"></path><path fill="#A2001D" d="M476.98 140.21l-21.89 10.68-3.18-15.32 31.19-29.77s-9.42-40.65-13.75-44.98l-112.32 55.82-6.84 36.76-31.9 28.59-.4 34.2 34.29-22.76 67.23-2.66-1.51 38.11h22.23l11.9-44.64 31.55-24.61-6.6-19.42z"></path><path fill="#EFC100" stroke="#231F20" stroke-miterlimit="10" d="M317.89 238.41l-22.24-11.11 22.24-11.11h144.46v22.22z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">AmericanSamoa +1684</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342"><path fill="#FFDA44" d="M0 0h513v342H0z"></path><path fill="#0052B4" d="M0 0h171v342H0z"></path><path fill="#D80027" d="M342 0h171v342H342zM198.92 113.58H256v64.8h-57.08zM309.16 228.68L256 243.18v-64.8h57.08z"></path><path fill="#BC8B00" d="M182.24 95.92v92.2c0 34.32 27.26 54.17 48.63 64.46-.8 1.37 25.13 8.26 25.13 8.26s25.93-6.9 25.13-8.26c21.38-10.29 48.63-30.14 48.63-64.46v-92.2H182.24zm129.86 92.2c0 16.88-10 29.43-32.76 43.9-8.62 5.48-17.54 9.03-23.34 11.01-5.8-1.98-14.72-5.53-23.34-11.01-22.76-14.47-32.76-28.02-32.76-43.9v-74.54h112.2v74.54z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Andorra +376</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342"><path d="M0 171h513v171H0z"></path><path fill="#D80027" d="M0 0h513v171H0z"></path><g fill="#FFDA44"><path d="M197.01 139.81c-9.32 12.37-9 27.81 3.37 37.12 0 0 162.62 122.13 164.64 123.93 2.02 1.8 6.3 2.38 11-3.27 4.46-5.36 3.31-9.78 1.04-11.63S197.01 139.81 197.01 139.81zM264.42 79.12l11.72 24.03 26.45 3.96-19.23 18.58 4.4 26.38-23.61-12.55-23.73 12.33 4.64-26.33L226 106.77l26.47-3.73z"></path><path d="M268.67 39.2l-3.2 22.04c51.81 3.9 92.64 47.18 92.64 99.99 0 55.38-44.9 100.28-100.28 100.28-40.82 0-75.94-24.39-91.59-59.4l-18.4 13.11c19.96 40.59 61.71 68.52 110 68.52 67.66 0 122.51-54.85 122.51-122.51-.01-64.01-49.1-116.54-111.68-122.03z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Angola +244</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342"><path fill="#0052B4" d="M0 0h513v342H0z"></path><path fill="white" d="M454.8 265.38c7.94-10.93 13.24-24.27 13.24-40.42V104.89a59.754 59.754 0 01-36.02 12.01c-19.64 0-37.07-9.43-48.03-24.01-10.95 14.58-28.39 24.01-48.03 24.01-13.52 0-25.99-4.47-36.02-12v120.06c0 16.16 5.3 29.5 13.24 40.42H454.8z"></path><path fill="#8DCCFF" d="M310.23 260.98C332.65 296.96 384 309 384 309s51.35-12.04 73.77-48.02H310.23z"></path><path fill="#D87B00" d="M396.66 172.21c.32 1.42 8.72 10.17 17.56 20.15 1.39 1.57-8.74 12.63-6.91 12.59 4.75-.12 19.27-17.26 19.34 6.65.05 15.94-30 27.51-30 27.51h17.47l.65 14.96s4.97-13.34 7.59-16.57c8.1-9.97 20.18-30.07 34.59-27.1 14.41 2.97-13.66-13.92-13.66-13.92s-5.2-15.19-16.63-16.97c-10.06-1.57-14.29-2.51-26.64-7.3-1.68-.65-3.88-2.32-3.36 0z"></path><path fill="#D87B00" d="M359.69 198.69c1.07-.99 4.46-12.63 8.69-25.28.67-1.99 15.31 1.27 14.35-.3-2.47-4.06-24.58-8.08-3.9-20.08 13.79-8 38.82 12.27 38.82 12.27l-8.72-15.14 12.64-8.03s-14.05 2.35-18.14 1.69c-12.68-2.04-36.13-2.48-40.75-16.45-4.62-13.97-5.25 18.79-5.25 18.79s-10.56 12.08-6.4 22.88c3.66 9.5 4.96 13.64 6.97 26.73.29 1.79-.06 4.53 1.69 2.92z"></path><path fill="#D87B00" d="M395.67 219.87c-1.39-.43-13.16 2.49-26.22 5.18-2.06.42-6.59-13.88-7.47-12.26-2.27 4.17 5.36 25.31-15.41 13.45-13.84-7.91-8.89-39.73-8.89-39.73l-8.71 15.14-13.29-6.9s9.09 10.96 10.57 14.84c4.6 11.99 16 32.49 6.24 43.49-9.76 11.01 18.88-4.9 18.88-4.9s15.76 3.07 23-5.96c6.38-7.94 9.3-11.14 19.61-19.45 1.43-1.12 3.97-2.19 1.69-2.9z"></path><path fill="white" d="M256.5 0h-23.1L160 48.9V0H96v48.9L22.6 0H0v22.7l46.1 30.7H0v64h46.1L0 148.1V171h22.6L96 121.8V171h64v-49.2l73.4 49.2h23.1v-22.9l-46.6-30.7h46.6v-64h-46.6l46.6-30.7z"></path><path fill="#D80027" d="M144 0h-32v69.4H0v32h112V171h32v-69.6h112.5v-32H144z"></path><path fill="#D80027" d="M0 171v-11.3l62.5-42.3h22.6L7.3 171zM7.3.1l77.8 53.2H62.5L0 11.1V.1zM256.5.1v11l-63 42.3h-22.6L248.7.1zM248.7 171l-77.8-53.6h22.6l63 42.3V171z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Anguilla +1264</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 744 496"><path fill="#3A7DCE" d="M0 0h744v496H0V0z"></path><path fill="white" d="M120 125l90 63 54-14 23-81 61-36 92 14 105 55 6 90 34 12v92l-65 115-78 24-72-17 18-30-8-32-10 9-162-25-49-85 20-46-49-62z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Antarctica +672</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342"><path d="M0 0h513v342H0z"></path><path fill="#186DD2" d="M88.8 136.5c-2.2 12.9-3.4 26.2-3.4 39.8 0 13.6 1.2 27 3.4 39.8L256 228.3l167.2-12.1c2.2-12.9 3.4-26.2 3.4-39.8s-1.2-27-3.4-39.8"></path><path fill="white" d="M423.2 219H88.8c15.8 69.8 84.7 122.3 167.2 122.3S407.4 288.8 423.2 219z"></path><path fill="#FFDA44" d="M365.9 136.5H146.1l44.9-21.1-23.9-43.5 48.8 9.4L222 32l34 36.2L290 32l6.1 49.3 48.8-9.4-23.9 43.5z"></path><g fill="#C32500"><path d="M256.5 342L0 0v342z"></path><path d="M513 342V0L256 342z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Antigua and Barbuda +1268</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342"><path fill="white" d="M0 0h512v342H0z"></path><path fill="#338AF3" d="M0 0h512v114H0zM0 228h512v114H0z"></path><circle fill="#FFDA44" stroke="#d6ab00" stroke-width="5" cx="256.5" cy="171" r="40"></circle></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Argentina +54</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342"><path fill="#0052B4" d="M0 0h513v342H0z"></path><path fill="#D80027" d="M0 0h513v114H0z"></path><path fill="#FF9811" d="M0 228h513v114H0z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Armenia +374</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 363 242"><path fill="#338AF3" d="M0 0h363v242H0z"></path><path fill="white" d="M57 96.9L14.7 78.2 57 59.6l18.6-42.2 18.6 42.2 42.3 18.6-42.3 18.7-18.6 42.2z"></path><path fill="#D80027" d="M75.6 40.6l11.5 26.1 26.1 11.5-26.1 11.5-11.5 26.1-11.5-26.1L38 78.2l26.1-11.5z"></path><g fill="#FFDA44"><path d="M0 152.2h363v15.7H0zM0 183.6h363v15.7H0z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Aruba +297</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342"><path fill="#0052B4" d="M0 0h513v342H0z"></path><path fill="white" d="M440.1 181.1c-.1 39.2-6.4 81.4-57.4 101.5-51.1-20.1-57.3-62.3-57.4-101.5h114.8z"></path><path fill="#29DBFF" d="M439.6 197.7c-2.8 34.9-12.4 67.4-57 85-44.4-17.6-54.5-51.2-56.9-84.9"></path><path fill="white" d="M437.8 214.1c-3.2 24.3-16.7 53.5-55.1 68.6-38.4-15.1-50.5-42.5-55.1-68.4"></path><path fill="#29DBFF" d="M434.2 230.3c-5.7 17.7-19.3 39.4-51.3 52.8-32-12.6-45.2-33.8-51.4-53"></path><path fill="white" d="M426.7 246.9c-6.5 11.3-17.7 25.4-44 35.9-27.5-11.5-37.4-25.3-44-36.1"></path><path fill="#29DBFF" d="M412.4 265.1c-8.1 7.2-12 11.2-29.6 17.9-20.1-7.9-22.6-11.6-29.2-17.5"></path><path fill="#5CC85C" d="M383.3 231.6c-.2-.2-27.9 35.7-27.9 35.7-1.8-1.3-10-9.5-13.3-15l41.3-50.1 40.2 49.7c-3.9 6.5-11.4 13.6-13.2 15M382.6 85.3l-26.5 45h53z"></path><ellipse transform="rotate(-82.3 291.431 225.686)" fill="#F7A226" cx="291.4" cy="225.7" rx="48.7" ry="15.7"></ellipse><ellipse transform="rotate(-68.099 303.087 164.67)" fill="#DDC7AB" cx="303.1" cy="164.7" rx="11.7" ry="7.2"></ellipse><ellipse transform="rotate(-81.738 291.697 271.697)" fill="#DDC7AB" cx="291.7" cy="271.7" rx="11.4" ry="3.3"></ellipse><ellipse transform="matrix(.9986 -.05353 .05353 .9986 -13.992 16.424)" fill="#DDC7AB" cx="299.6" cy="269.4" rx="3.3" ry="11"></ellipse><ellipse transform="rotate(-21.518 314.54 201.06)" fill="#DDC7AB" cx="314.5" cy="201.1" rx="4.1" ry="13.7"></ellipse><ellipse transform="rotate(-21.518 317.511 178.077)" fill="#DDC7AB" cx="317.5" cy="178.1" rx="13.7" ry="4.1"></ellipse><ellipse transform="rotate(-7.7 473.781 225.857)" fill="#F7A226" cx="473.6" cy="225.9" rx="15.7" ry="48.7"></ellipse><ellipse transform="rotate(-21.901 462.057 164.866)" fill="#DDC7AB" cx="462" cy="164.9" rx="7.2" ry="11.7"></ellipse><ellipse transform="rotate(-8.27 473.27 271.908)" fill="#DDC7AB" cx="473.4" cy="271.9" rx="3.3" ry="11.4"></ellipse><ellipse transform="matrix(.05353 -.9986 .9986 .05353 171.34 719.998)" fill="#DDC7AB" cx="465.5" cy="269.6" rx="11" ry="3.3"></ellipse><ellipse transform="rotate(-68.482 450.552 201.247)" fill="#DDC7AB" cx="450.6" cy="201.2" rx="13.7" ry="4.1"></ellipse><ellipse transform="rotate(-68.482 447.58 178.265)" fill="#DDC7AB" cx="447.6" cy="178.3" rx="4.1" ry="13.7"></ellipse><path fill="#B0C6CC" d="M373.3 130.3L356.1 155l17.8 26.1H396l4.7-25.4-5.4-25.4z"></path><path fill="white" d="M256 0v117.4h-46.1l46.1 30.7v22.6h-22.6L160 121.8v48.9H96v-48.9l-73.4 48.9H0v-22.6l46.1-30.7H0v-64h46.1L0 22.7V0h22.6L96 48.9V0h64v48.9L233.4 0z"></path><path fill="#D80027" d="M144 0h-32v69.4H0v32h112v69.3h32v-69.3h112v-32H144z"></path><path fill="#2E52B2" d="M256 22.7v30.7h-46.1z"></path><g><path fill="#D80027" d="M0 170.7v-11l62.5-42.3h22.6L7.3 170.7z"></path></g><path fill="#D80027" d="M7.3.1l77.8 53.2H62.5L0 11.1V.1zM256 .1v11l-62.5 42.3h-22.6L248.7.1zM248.7 170.7l-77.8-53.3h22.6l62.5 42.3v11z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Ascension Island +247</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342"><path fill="white" d="M0 114h513v114H0z"></path><path fill="#D80027" d="M0 0h513v114H0zM0 228h513v114H0z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Austria +43</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342"><path fill="#D80027" d="M0 0h513v342H0z"></path><path fill="#338AF3" d="M0 0h513v114H0z"></path><path fill="#6DA544" d="M0 228h513v114H0z"></path><g fill="white"><path d="M265.6 212.6c-23 0-41.6-18.6-41.6-41.6s18.6-41.6 41.6-41.6c7.2 0 13.9 1.8 19.8 5-9.2-9-21.9-14.6-35.8-14.6-28.3 0-51.2 22.9-51.2 51.2s22.9 51.2 51.2 51.2c13.9 0 26.6-5.6 35.8-14.6-5.9 3.2-12.6 5-19.8 5z"></path><path d="M297.6 142.2l5.5 15.5 14.9-7.1-7.1 14.9 15.5 5.5-15.5 5.5 7.1 14.9-14.9-7.1-5.5 15.5-5.5-15.5-14.9 7.1 7.1-14.9-15.5-5.5 15.5-5.5-7.1-14.9 14.9 7.1z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Azerbaijan +994</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#FFDA44" d="M0 85.337h512v341.326H0z"></path><g fill="#338AF3"><path d="M0 85.337h512v113.775H0zM0 312.888h512v113.775H0z"></path></g><path d="M256 256.006L0 426.668V85.331z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Bahamas +1242</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#D80027" d="M2.216 86.076H512v339.848H2.216z"></path><path fill="white" d="M209.455 154.969l-50.236 25.267 50.236 25.257-50.236 25.267 50.236 25.257-50.236 25.266 50.236 25.257-50.236 25.268 50.236 25.257-50.236 25.267 50.236 25.268-36.45 18.33H0V86.07h172.939l36.516 18.364-50.236 25.267z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Bahrain +973</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#496E2D" d="M0 85.331h512v341.337H0z"></path><circle fill="#F40B32" cx="218.902" cy="255.994" r="115"></circle></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Bangladesh +880</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 341.33"><path fill="#FFDA44" d="M0 0h512v341.34H0z"></path><g fill="#0052B4"><path d="M0 0h170.66v341.34H0zM341.34 0H512v341.34H341.34z"></path></g><path d="M325.74 101.02l-31.97 12.4c-.68 1.35-5.79 7.54-8.18 53.06h-17.05v-60.42L256 78.68l-12.54 27v60.8H226.4c-2.39-45.53-7.8-52.48-8.47-53.84l-31.68-11.63c.15.31 15.4 31.34 15.4 78.01v12.54h41.81v71.07h25.08v-71.07h41.81v-12.54c0-24.13 4.17-44.02 7.68-56.46 3.82-13.57 7.7-21.49 7.74-21.57l-.03.03z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Barbados +1246</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 341.3"><path fill="#75AF2B" d="M.6.2H512v341H.6z"></path><path fill="#D32424" d="M0 230h512V.2H0"></path><path fill="white" d="M100.1 230V.2H0v340.9h511.4-411.3z"></path><path fill="#D32424" d="M51.6 218l-38-47.7 38-46.9 38 46.9zM51.6 113.4l-38-47.7 38-46.9 38 46.9zM51.6 322.6l-38-47.7 38-46.9 38 46.9z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Belarus +375</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#FFDA44" d="M0 85.331h512v341.326H0z"></path><path d="M0 85.331h170.663v341.337H0z"></path><path fill="#D80027" d="M341.337 85.331H512v341.337H341.337z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Belgium +32</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 341.3"><path fill="#0052B4" d="M0 0h512v341.3H0z"></path><circle fill="white" cx="260.9" cy="170.9" r="118.9"></circle><circle fill="none" stroke="#6DA544" stroke-width="18" stroke-miterlimit="10" cx="261.9" cy="173.1" r="94.5"></circle><g stroke="black"><path fill="#0052B4" d="M261.9 151.5l-50.6 23.4v20c0 11.8 6.1 22.8 16.2 28.9L262 239l34.5-15.2c10-6.2 16.2-17.1 16.2-28.9v-20l-50.8-23.4z"></path><path fill="#FFDA44" d="M211.3 128.1h101.3v46.7H211.3z"></path></g><g fill="#BC0029"><path d="M0 0h512v35H0zM0 306h512v35H0z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Belize +501</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#6DA544" d="M0 85.337h512v341.326H0z"></path><path fill="#FFDA44" d="M196.641 85.337H512V256H196.641z"></path><path fill="#D80027" d="M196.641 256H512v170.663H196.641z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Benin +229</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 341.33"><path fill="#D80027" d="M0 0h512v341.34H0z"></path><path fill="#0052B4" d="M0 .1h256v170.6H0z"></path><path fill="white" d="M256 0h-22.6L160 48.9V0H96v48.9L22.6 0H0v22.7l46.1 30.7H0v64h46.1L0 148.1v22.6h22.6L96 121.8v48.9h64v-48.9l73.4 48.9H256v-22.6l-46.1-30.7H256v-64h-46.1L256 22.7z"></path><path fill="#D80027" d="M144 0h-32v69.4H0v32h112v69.3h32v-69.3h112v-32H144z"></path><path fill="#D80027" d="M0 170.7v-11l62.5-42.3h22.6L7.3 170.7zM7.3.1l77.8 53.2H62.5L0 11.1V.1zM256 .1v11l-62.5 42.3h-22.6L248.7.1zM248.7 170.7l-77.8-53.3h22.6l62.5 42.3v11z"></path><g transform="translate(13 5)"><path fill="white" d="M303.9 94.94v99.69c0 59.81 79.75 99.69 79.75 99.69s79.75-39.88 79.75-99.69V94.94H303.9z"></path><path fill="#2F8F22" d="M436.37 254.44H330.93c23.13 25.08 52.72 39.88 52.72 39.88s29.59-14.8 52.72-39.88z"></path><circle fill="#65B5D2" cx="383.65" cy="214.56" r="39.88"></circle><circle fill="#D80027" cx="343.77" cy="194.63" r="19.94"></circle><circle fill="#D80027" cx="423.52" cy="194.63" r="19.94"></circle><circle fill="#D80027" cx="383.65" cy="154.75" r="19.94"></circle></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Bermuda +1441</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 341.3"><path fill="#FF7415" d="M0 0h512v341.3H0z"></path><path fill="#FFDA44" d="M512 0H0v341.3"></path><path fill="none" stroke="white" stroke-width="42" stroke-miterlimit="10" d="M128.7 255.5s35 54 67.3 32.4c56.9-37.9-68.9-108.6-2.9-152.6 58.3-38.8 76.6 103.5 137.6 62.8 59-39.3-64.7-111.4-9.2-148.4 33.4-22.2 67.1 32.6 67.1 32.6"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Bhutan +975</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#FFDA44" d="M0 85.337h512v341.326H0z"></path><path fill="#D80027" d="M0 85.337h512v113.775H0z"></path><path fill="#6DA544" d="M0 312.888h512v113.775H0z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Bolivia +591</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#0052B4" d="M0 85.334h512v341.337H0z"></path><path fill="#FFDA44" d="M99.905 85.329h341.333v341.334"></path><g fill="white"><path d="M36.561 100.645l14.843-10.807 14.867 10.794-4.979-15.302H41.525z"></path><path d="M88.332 103.632L82.649 86.16l-5.672 17.472-18.365.012 14.867 10.796-5.661 17.461 14.843-10.806 14.866 10.795-5.684-17.474 14.854-10.795z"></path><path d="M119.59 134.89l-5.684-17.474-5.673 17.474-18.365.011 14.867 10.795-5.661 17.462 14.844-10.807 14.866 10.796-5.685-17.474 14.856-10.794z"></path><path d="M150.846 166.146l-5.683-17.473-5.673 17.473-18.364.011 14.866 10.796-5.661 17.461 14.843-10.806 14.866 10.795-5.683-17.474 14.855-10.794z"></path><path d="M182.103 197.403l-5.683-17.474-5.672 17.474-18.366.011 14.866 10.795-5.66 17.462 14.843-10.807 14.866 10.796-5.684-17.473 14.855-10.795z"></path><path d="M213.359 228.659l-5.683-17.472-5.672 17.472-18.365.012 14.866 10.795-5.66 17.462 14.842-10.806 14.866 10.794-5.683-17.473 14.855-10.795z"></path><path d="M244.616 259.916l-5.683-17.473-5.672 17.473-18.366.012 14.867 10.795-5.661 17.462 14.844-10.807 14.866 10.794-5.685-17.472 14.855-10.794z"></path><path d="M275.872 291.173L270.19 273.7l-5.673 17.473-18.365.011 14.867 10.796-5.661 17.461 14.843-10.806 14.866 10.795-5.683-17.474 14.853-10.794z"></path><path d="M307.13 322.43l-5.683-17.474-5.674 17.474-18.364.011 14.866 10.795-5.661 17.462 14.844-10.807 14.866 10.796-5.684-17.474 14.855-10.794z"></path><path d="M338.386 353.686l-5.683-17.472-5.672 17.472-18.365.012 14.866 10.795-5.661 17.462 14.843-10.807 14.866 10.795-5.683-17.472 14.855-10.796z"></path><path d="M369.643 384.943l-5.683-17.473-5.672 17.473-18.366.012 14.866 10.794-5.66 17.463 14.843-10.807 14.866 10.795-5.684-17.473 14.855-10.795z"></path><path d="M395.216 398.727l-5.672 17.472-18.365.012 14.394 10.453h19.278l14.414-10.476-18.366.011z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Bosnia and Herzegovina +387</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="white" d="M0 85.337h512v341.326H0z"></path><g fill="#338AF3"><path d="M0 322.783h512v103.88H0zM0 85.337h512v104.515H0z"></path></g><path d="M0 210.877h512v89.656H0z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Botswana +267</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 341.3"><path fill="#6DA544" d="M0 0h512v341.3H0z"></path><path fill="#FFDA44" d="M256 19.3l205.4 151.4L256 322 50.6 170.7z"></path><circle fill="white" cx="256" cy="170.7" r="86.5"></circle><g fill="#0052B4"><path d="M212.8 165.3c-15 0-29.5 2.3-43.2 6.5.6 47.2 39.1 85.3 86.4 85.3 29.3 0 55.2-14.6 70.8-36.9-26.7-33.4-67.9-54.9-114-54.9zM340.9 187.2c1-5.4 1.6-10.9 1.6-16.6 0-47.8-38.7-86.5-86.5-86.5-35.6 0-66.2 21.6-79.5 52.3 11.7-2.4 23.8-3.7 36.2-3.7 50.3.1 95.7 21 128.2 54.5z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Brazil +55</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342"><path fill="white" d="M0-.3h513V342H0V-.3z"></path><path fill="#0052B4" d="M462.9 198.1c-4 0-14-5-21-9-11-6-21-12-31.1-12s-20 6-31.1 12c-7 4-16 9-20 9s-14-5-20-9c-11-6-22-12-32.1-12-9 0-20 6-31.1 12-7 4-16 9-20 9s-13-5-20-9c-11-6-22-12-31.1-12-10 0-21 6-32.1 12-6 4-16 9-20 9s-13-5-20-9c-11-6-21-12-31.1-12s-20 6-31.1 12c-7 4-17 9-21 9s-13-5-20-9c-10-6-20-12-30.1-12v22l19 10c11 6 21 12 31.1 12s21-6 32.1-12c6-4 16-10 20-10s13 6 20 10c11 6 21 12 31.1 12s20-6 31.1-12c7-4 17-10 21-10s13 6 20 10c11 6 21 12 31.1 12s20-6 31.1-12c7-4 16-10 20-10s14 6 21 10c11 6 21 12 31.1 12s20-6 31.1-12c7-4 16-10 20-10s14 6 20 10c11 6 22 12 32.1 12s20-6 31.1-12l19-10v-22c-10 0-20 6-30.1 12-7 4-16 9-20 9zM0 31.7l19 10c11 6 21 12 31.1 12s21-6 32.1-12c6-4 16-10 20-10s13 6 20 10c11 6 21 12 31.1 12s20-6 31.1-12c7-4 17-10 21-10s13 6 20 10c11 6 21 12 31.1 12s20-6 31.1-12c7-4 16-10 20-10s14 6 21 10c11 6 21 12 31.1 12s20-6 31.1-12c7-4 16-10 20-10s14 6 20 10c11 6 22 12 32.1 12s20-6 31.1-12l19-10v-22c-10 1-20 6-30.1 12-7 4-16 9-20 9s-14-5-21-9c-11-6-21-12-31.1-12s-20 6-31.1 12c-7 4-16 9-20 9s-14-5-20-9c-11-6-22-12-32.1-12s-20 6-31.1 12c-7 4-16 9-20 9s-13-5-20-9c-11-6-22-12-31.1-12s-21 6-32.1 12c-6 4-16 9-20 9s-13-5-20-9c-11-6-21-12-31.1-12s-20 6-31.1 12c-7 4-17 9-21 9s-13-5-20-9c-10-6-20-11-30.1-12v22zm462.9 55.2c-4 0-14-5-21-9-11-6-21-12-31.1-12s-20 6-31.1 12c-7 4-16 9-20 9s-14-5-20-9c-11-6-22-12-32.1-12-9 0-20 6-31.1 12-7 4-16 9-20 9s-13-5-20-9c-11-6-22-12-31.1-12-10 0-21 6-32.1 12-6 4-16 9-20 9s-13-5-20-9c-11-6-21-12-31.1-12s-20 6-31.1 12c-7 4-17 9-21 9s-13-5-20-9c-10-6-20-12-30.1-12v22l19 9c11 6 21 12 31.1 12s21-6 32.1-12c6-4 16-9 20-9s13 5 20 9c11 6 21 12 31.1 12s20-6 31.1-12c7-4 17-9 21-9s13 5 20 9c11 6 21 12 31.1 12s20-6 31.1-12c7-4 16-9 20-9s14 5 21 9c11 6 21 12 31.1 12s20-6 31.1-12c7-4 16-9 20-9s14 5 20 9c11 6 22 12 32.1 12s20-6 31.1-12l19-9v-22c-10 0-20 6-30.1 12-7 3.9-16 9-20 9zm50.1 34c-10 1-20 6-30.1 12-7 4-16 10-20 10s-14-6-21-10c-11-6-21-12-31.1-12s-20 6-31.1 12c-7 4-16 10-20 10s-14-6-20-10c-11-6-22-12-32.1-12s-20 6-31.1 12c-7 4-16 10-20 10s-13-6-20-10c-11-6-22-12-31.1-12s-21 6-32.1 12c-6 4-16 10-20 10s-13-6-20-10c-11-6-21-12-31.1-12s-20 6-31.1 12c-7 4-17 10-21 10s-13-6-20-10c-10-6-20-11-30.1-12v23c4 1 13 5 19 9 11 6 21 12 31.1 12s21-6 32.1-12c6-4 16-9 20-9s13 5 20 9c11 6 21 12 31.1 12s20-6 31.1-12c7-4 17-9 21-9s13 5 20 9c11 6 21 12 31.1 12s20-6 31.1-12c7-4 16-9 20-9s14 5 21 9c11 6 21 12 31.1 12s20-6 31.1-12c7-4 16-9 20-9s14 5 20 9c11 6 22 12 32.1 12s20-6 31.1-12c6-4 15-8 19-9v-23zm-50.1 133.3c-4 0-14-5-21-9-11-6-21-12-31.1-12s-20 6-31.1 12c-7 4-16 9-20 9s-14-5-20-9c-11-6-22-12-32.1-12-9 0-20 6-31.1 12-7 4-16 9-20 9s-13-5-20-9c-11-6-22-12-31.1-12-10 0-21 6-32.1 12-6 4-16 9-20 9s-13-5-20-9c-11-6-21-12-31.1-12s-20 6-31.1 12c-7 4-17 9-21 9s-13-5-20-9c-10-6-20-12-30.1-12v22l19 9c11 6 21 12 31.1 12s21-6 32.1-12c6-4 16-9 20-9s13 5 20 9c11 6 21 12 31.1 12s20-6 31.1-12c7-4 17-9 21-9s13 5 20 9c11 6 21 12 31.1 12s20-6 31.1-12c7-4 16-9 20-9s14 5 21 9c11 6 21 12 31.1 12s20-6 31.1-12c7-4 16-9 20-9s14 5 20 9c11 6 22 12 32.1 12s20-6 31.1-12l19-9v-22c-10 0-20 6-30.1 12-7 4-16 9-20 9zm50.1 34c-10 1-20 6-30.1 12-7 4-16 10-20 10s-14-6-21-10c-11-6-21-12-31.1-12s-20 6-31.1 12c-7 4-16 10-20 10s-14-6-20-10c-11-6-22-12-32.1-12s-20 6-31.1 12c-7 4-16 10-20 10s-13-6-20-10c-11-6-22-12-31.1-12s-21 6-32.1 12c-6 4-16 10-20 10s-13-6-20-10c-11-6-21-12-31.1-12s-20 6-31.1 12c-7 4-17 10-21 10s-13-6-20-10c-10-6-20-11-30.1-12v23c4 0 13 5 19 9 11 6 21 12 31.1 12s21-6 32.1-12c6-4 16-9 20-9s13 5 20 9c11 6 21 12 31.1 12s20-6 31.1-12c7-4 17-9 21-9s13 5 20 9c11 6 21 12 31.1 12s20-6 31.1-12c7-4 16-9 20-9s14 5 21 9c11 6 21 12 31.1 12s20-6 31.1-12c7-4 16-9 20-9s14 5 20 9c11 6 22 12 32.1 12s20-6 31.1-12c6-4 15-9 19-9v-23z"></path><path fill="white" d="M0-.3h256v171H0V-.3z"></path><path d="M389.8 119.9H408v78.8h-18.3l.1-78.8zm0 117.8H408v75.1h-18.3l.1-75.1z" fill="#A2001D"></path><g fill="#D80027"><path d="M144-.3h-32v70H0v32h112v69h32v-69h112v-32H144v-70z"></path><path d="M0-.3v15l57 39h23L0-.3zM256-.3v15l-57 39h-23l80-54z"></path><path d="M0-.3v15l57 39h23L0-.3zM256-.3v15l-57 39h-23l80-54zM0 170.7v-15l57-38h23l-80 53zM256 170.7v-15l-57-38h-23l80 53z"></path></g><g fill="#2E52B2"><path d="M0 22.7v31h46l-46-31zm96-23v49L23-.3h73zM256 22.7v31h-46l46-31zm-96-23v49l73-49h-73z"></path><path d="M0 22.7v31h46l-46-31zm96-23v49L23-.3h73zM256 22.7v31h-46l46-31zm-96-23v49l73-49h-73zM0 147.7v-30h46l-46 30zm96 23v-49l-73 49h73zM256 147.7v-30h-46l46 30zm-96 23v-49l73 49h-73z"></path></g><path fill="#5DA51E" stroke="#45602C" stroke-width="4" stroke-miterlimit="10" d="M462.8 91.5h-29.1l25.7-25.7c4.5-4.4 4.5-11.4 0-15.8l-3.4-3.4c-4.4-4.4-11.4-4.4-15.8 0l-25.9 25.9V37.4c0-6.2-5.1-11.3-11.3-11.3h-4.7c-6.2 0-11.3 5.1-11.3 11.3v31.7l-23.5-23.8c-4.7-4.7-12.2-4.7-16.9 0l-3.6 3.6c-4.7 4.7-4.7 12.4 0 17.2l25 25.4h-30.6c-6 0-10.9 4.9-10.9 10.9v4.6c0 6 4.9 10.9 10.9 10.9H369l-20.7 20.7c-4.4 4.4-4.4 11.4 0 15.8l3.4 3.4c4.4 4.4 11.4 4.4 15.8 0l19.6-19.6V167c0 6.1 5.1 11.1 11.3 11.3h4.7c6.2 0 11.3-5.1 11.3-11.3v-28.3l22.2 22.6c4.7 4.7 12.4 4.7 17.1 0l3.6-3.6c4.7-4.7 4.7-12.4 0-17.2L435.2 118h27.6c5.9 0 10.7-4.9 10.9-10.9v-4.6c0-6.1-4.9-11-10.9-11z"></path><path fill="#E2DD24" stroke="#525625" stroke-width="4" stroke-miterlimit="10" d="M439.2 249.1h-79.8s-.9-13.4-6-21.8c-6.2-10.4-13.9-28.1-1.4-36.7 15.9-10.9 33.7.8 48.2.8 11.8.1 26.9-14 45-.8 12.2 8.9 3.9 28.2-1.3 36.7-7 11.5-4.7 21.8-4.7 21.8z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">British Indian Ocean Territory +246</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 341.33"><path fill="#FFDA44" d="M0 0h512v341.33H0z"></path><path d="M0 193.74l512 127.19V214.26L0 97.08z"></path><path fill="white" d="M512 234.26v-86.67L0 20.41v86.67"></path><g fill="#D80027" stroke="#231F20" stroke-width="3" stroke-miterlimit="10"><path d="M306.4 134.01a50.28 50.28 0 016.07 24.02c0 21.55-13.51 39.94-32.52 47.19v-59.51c5.7-1.19 10-6.37 10-12.59 6.9 0 12.5-5.75 12.5-12.85h-.42c6.9 0 12.91-5.75 12.91-12.85h-34.99V76.58l-14.99-27.71-15 27.71v30.84h-34.99c0 7.1 6.01 12.85 12.91 12.85h-.42c0 7.1 5.6 12.85 12.5 12.85 0 6.22 4.29 11.4 9.99 12.59v61.37c-22.09-5.39-38.48-25.3-38.48-49.05 0-8.7 2.2-16.88 6.07-24.02-10.96 11.21-17.72 26.53-17.72 43.44 0 34.32 27.82 62.15 62.15 62.15s62.15-27.83 62.15-62.15c0-16.91-6.77-32.24-17.72-43.44z"></path><path d="M198.46 226.81s20.69 27.71 66.5 27.71 66.5-27.71 66.5-27.71l13.47 28.37s-21.03 27.71-79.97 27.71-79.97-27.71-79.97-27.71l13.47-28.37zM129.24 133.18h20.88l24.93 27.26v73.45h-26.28v-68.37zM400 133.18h-20.88l-24.93 27.26v73.45h26.27v-68.37z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Brunei Darussalam +673</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#496E2D" d="M0 85.337h512v341.326H0z"></path><path fill="white" d="M0 85.337h512v113.775H0z"></path><path fill="#D80027" d="M0 312.888h512v113.775H0z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Bulgaria +359</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 341.3"><path fill="#6DA544" d="M0 0h512v341.3H0z"></path><path fill="#D80027" d="M0 0h512v170.7H0z"></path><path fill="#FFDA44" d="M256 66.9l25.8 79.3h83.3l-67.4 49 25.7 79.3-67.4-49-67.4 49 25.7-79.3-67.4-49h83.3z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Burkina Faso +226</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 341.3"><path fill="#D80027" d="M0 0h512v341.3H0z"></path><g fill="#6DA544"><path d="M215.9 170.7L0 314.6V26.8zM512 26.8v287.8L296.1 170.7z"></path></g><path fill="#0052B4" d="M512 26.8L296.1 170.7 512 314.6v26.7h-40.1L256 197.4 40.1 341.3H0v-26.7l215.9-143.9L0 26.8V0h40.1L256 143.9 471.9 0H512z"></path><path fill="white" d="M512 26.8L296.1 170.7 512 314.6v26.7h-40.1L256 197.4 40.1 341.3H0v-26.7l215.9-143.9L0 26.8V0h40.1L256 143.9 471.9 0H512z"></path><circle fill="white" cx="251.6" cy="170.7" r="100.2"></circle><g fill="#D80027"><path d="M251.6 93.3l10.1 17.5h20.2l-10.1 17.5 10.1 17.5h-20.2l-10.1 17.5-10.1-17.5h-20.2l10.1-17.5-10.1-17.5h20.2zM210.3 163.4l10.1 17.5h20.3l-10.1 17.5 10.1 17.5h-20.3l-10.1 17.5-10.1-17.5H180l10.1-17.5-10.1-17.5h20.2zM292.8 163.4l10.1 17.5h20.2L313 198.4l10.1 17.5h-20.2l-10.1 17.5-10.1-17.5h-20.2l10.1-17.5-10.1-17.5h20.2z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Burundi +257</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#D80027" d="M0 85.337h512v341.326H0z"></path><g fill="#0052B4"><path d="M0 85.337h512v113.775H0zM0 312.888h512v113.775H0z"></path></g><path fill="white" d="M303.49 281.971v-17.809h-11.873v-23.745l-11.872-11.872-11.872 11.872v-23.744L256 204.8l-11.873 11.873v23.744l-11.872-11.872-11.872 11.872v23.745H208.51v17.809h-11.872v17.808h118.724v-17.808z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Cambodia +855</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 341.3"><path fill="#D80027" d="M0 0h512v341.3H0z"></path><path fill="#496E2D" d="M0 0h170.7v341.3H0z"></path><g fill="#FFDA44"><path d="M341.3 0H512v341.3H341.3zM256 102.2l17.2 53H329L283.9 188l17.2 53-45.1-32.7-45.1 32.7 17.2-53-45.1-32.8h55.8z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Cameroon +237</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 341.3"><path fill="#0052B4" d="M0 0h512v341.3H0z"></path><path fill="#D80027" d="M0 182.2h512v41.4H0z"></path><path fill="white" d="M0 140.8h512v41.4H0zM0 223.6h512V265H0z"></path><g fill="#FFDA44" stroke="black" stroke-miterlimit="10"><path d="M150.4 70l6.9 21.1h22.2l-18 13.1 6.9 21.1-18-13.1-17.9 13.1 6.8-21.1-17.9-13.1h22.2zM150.4 279.7l6.9 21.1h22.2l-18 13 6.9 21.2-18-13.1-17.9 13.1 6.8-21.2-17.9-13h22.2zM52.8 208.8l6.9 21.1h22.2l-18 13 6.9 21.2-18-13.1-17.9 13.1 6.8-21.2-17.9-13H46zM90.1 91l6.9 21.1h22.2l-18 13 6.9 21.2-18-13.1-17.9 13.1 6.8-21.2-18-13h22.3zM23.8 162H46l6.8-21.1 6.9 21.1h22.2l-18 13.1 6.9 21.1-18-13-17.9 13 6.8-21.1zM72.2 310.9l6.8-21.1-18-13h22.3l6.8-21.2 6.9 21.2h22.2l-18 13 6.9 21.1-18-13zM248 208.8l-6.9 21.1h-22.2l18 13-6.9 21.2 18-13.1 18 13.1-6.9-21.2 18-13h-22.2zM210.7 91l-6.8 21.1h-22.2l17.9 13-6.8 21.2 17.9-13.1 18 13.1-6.9-21.2 18-13h-22.2zM277.1 162h-22.2l-6.9-21.1-6.9 21.1h-22.2l18 13.1-6.9 21.1 18-13 18 13-6.9-21.1zM228.7 310.9l-6.9-21.1 18-13h-22.2l-6.9-21.2-6.8 21.2h-22.2l17.9 13-6.8 21.1 17.9-13z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Cape Verde +238</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#0052B4" d="M0 85.334h512v341.337H0z"></path><circle fill="#6DA544" cx="384" cy="181.79" r="29.682"></circle><path fill="#D80027" d="M332.054 174.377h103.88v44.522h-103.88z"></path><path fill="#496E2D" d="M435.942 255.997v-.001.001z"></path><path fill="#FFDA44" d="M332.058 285.678v29.682h15.616c9.364 9.176 22.18 14.84 36.326 14.84 14.147 0 26.962-5.664 36.326-14.84h15.616v-29.682H332.058z"></path><path fill="#338AF3" d="M332.058 211.475v44.522c0 39.759 51.942 51.942 51.942 51.942s51.942-12.182 51.942-51.942v-44.522H332.058z"></path><g fill="#F3F3F3"><path d="M383.997 235.256c-12.985 0-12.985 11.873-25.97 11.873s-12.985-11.873-25.97-11.873v20.777c12.985 0 12.985 11.873 25.97 11.873s12.985-11.873 25.97-11.873c12.986 0 12.986 11.873 25.973 11.873 12.986 0 12.986-11.873 25.973-11.873v-20.777c-12.986 0-12.986 11.873-25.973 11.873-12.986-.001-12.986-11.873-25.973-11.873zM383.997 193.666c-12.985 0-12.985 11.873-25.97 11.873s-12.985-11.873-25.97-11.873v20.777c12.985 0 12.985 11.873 25.97 11.873s12.985-11.873 25.97-11.873c12.986 0 12.986 11.873 25.973 11.873 12.986 0 12.986-11.873 25.973-11.873v-20.777c-12.986 0-12.986 11.873-25.973 11.873-12.986 0-12.986-11.873-25.973-11.873z"></path></g><path fill="white" d="M256 85.334v22.617l-46.069 30.709H256v64h-46.069L256 233.38v22.617h-22.628L160 207.078v48.919H96v-48.919l-73.372 48.919H0V233.38l46.069-30.72H0v-64h46.069L0 107.951V85.334h22.628L96 134.241V85.334h64v48.907l73.372-48.907z"></path><g fill="#D80027"><path d="M144 85.329h-32v69.334H0v32h112v69.334h32v-69.334h112v-32H144z"></path><path d="M0 85.329v15.082l57.377 38.252H80zM256 85.329v15.082l-57.377 38.252H176z"></path><path d="M0 85.329v15.082l57.377 38.252H80zM256 85.329v15.082l-57.377 38.252H176zM0 255.997v-15.082l57.377-38.252H80zM256 255.997v-15.082l-57.377-38.252H176z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Cayman Islands +1345</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 341.3"><path fill="#D80027" d="M0 0h512v341.3H0z"></path><g fill="#6DA544"><path d="M0 170.7h211.5V256H0zM300.5 170.7H512V256H300.5z"></path></g><path fill="#0052B4" d="M0 0v85.3h211.5V0h89v85.3H512V0z"></path><g fill="white"><path d="M300.5 85.3H512v85.3H300.5zM0 85.3h211.5v85.3H0z"></path></g><g fill="#FFDA44"><path d="M300.5 341.3h-89V256H0v85.3h512V256H300.5zM105.7 8.6l8.6 26.2h27.5L119.5 51l8.6 26.2L105.7 61 83.4 77.2 91.9 51 69.6 34.8h27.6z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Central African Republic +236</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#FFDA44" d="M0 85.331h512v341.337H0z"></path><path fill="#0052B4" d="M0 85.331h170.663v341.337H0z"></path><path fill="#D80027" d="M341.337 85.331H512v341.337H341.337z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Chad +235</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#D80027" d="M0 85.337h512v341.326H0z"></path><path fill="white" d="M256 85.337h256V256H256z"></path><path fill="#0052B4" d="M0 85.337h256V256H0z"></path><path fill="white" d="M128 109.801l15.108 46.498H192l-39.554 28.739 15.108 46.498L128 202.799l-39.554 28.737 15.108-46.498L64 156.299h48.892z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Chile +56</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 341.3"><path fill="#D80027" d="M0 0h512v341.3H0z"></path><g fill="#FFDA44"><path d="M352.3 312.6L328 294.9l-24.4 17.7 9.3-28.6-24.3-17.7h30.1l9.3-28.6 9.3 28.6h30.1L343 284zM415.9 120.9l-24.4 17.7 9.3 28.6-24.3-17.7-24.4 17.7 9.3-28.6-24.3-17.7h30.1l9.3-28.6 9.3 28.6zM367.4 57.4L343 75l9.3 28.7L328 86l-24.4 17.7 9.3-28.7-24.3-17.6h30.1l9.3-28.7 9.3 28.7zM415.9 204.4L391.5 222l9.3 28.7-24.3-17.7-24.4 17.7 9.3-28.7-24.3-17.6h30.1l9.3-28.7 9.3 28.7z"></path></g><path fill="#FFDA44" d="M167.6 64.4l26 80.3h84.5l-68.3 49.6 26.1 80.4-68.3-49.7-68.4 49.7 26.1-80.4L57 144.7h84.5z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">China +86</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 341.3"><path fill="#0052B4" d="M0 0h512v341.3H0z"></path><path fill="#6DA544" d="M0 0h512v341.3"></path><g fill="white"><path d="M77.6 272l5.7 11.9 12.8-3-5.7 11.9 10.3 8.1-12.8 2.9V317l-10.3-8.3-10.2 8.3v-13.2l-12.8-2.9 10.3-8.1-5.8-11.9 12.9 3zM40.5 173.1l5.7 11.9 12.8-3-5.7 11.8 10.3 8.2-12.9 2.9.1 13.2-10.3-8.3-10.3 8.3.1-13.2-12.9-2.9 10.4-8.2L22 182l12.8 3zM77.6 92.2l5.7 11.8 12.8-2.9-5.7 11.8 10.3 8.2-12.8 2.9v13.1l-10.3-8.2-10.2 8.2V124l-12.8-2.9 10.3-8.2-5.8-11.8L72 104zM123.7 155.1l5.7 11.9 12.8-3-5.7 11.9 10.3 8.1-12.8 2.9v13.2l-10.3-8.2-10.2 8.2v-13.2l-12.8-2.9 10.3-8.1-5.7-11.9 12.8 3zM90.8 209.1l4.4 13.7h14.5L98 231.3l4.5 13.7-11.7-8.4-11.7 8.4 4.5-13.7-11.7-8.5h14.4z"></path></g><circle fill="#FFDA44" cx="267.1" cy="170.7" r="74.5"></circle><path fill="#6DA544" d="M267.1 220.3h24.8s10.8-19 0-37.2l24.8-24.8-12.4-24.8h-12.4s-6.2 18.6-31 18.6-31-18.6-31-18.6h-12.4l12.4 24.8-12.4 24.8 12.4 12.4s12.4-24.8 37.2-12.4c0 0 10.5 15.5 0 37.2z"></path><path fill="#FFDA44" d="M464.4 92.2c.6-2.9-.2-17.6-.2-20.7 0-21.3-13.9-39.4-33.2-45.7 5.9 12 9.2 25.4 9.2 39.7 0 4.8-.4 9.5-1.1 14.1-2.9-4.7-6.6-8.9-11.2-12.6-17.1-13.6-40.6-14-57.9-2.5 13.4 2.9 26.3 8.9 37.7 18 9 7.1 16.2 16.8 21.7 26.1 0 0-17.8 10.9-31 15.1s-42.3 7.9-42.3 7.9c72 12 132-36 132-36-6.5-13.4-15.8-4-23.7-3.4z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Christmas Island +61</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 341.3"><path fill="#6DA544" d="M0 0h512v341.3H0z"></path><g fill="#FFDA44"><path d="M422.7 252.4l6.2 12.8 13.8-3.2-6.2 12.8 11.2 8.8-13.9 3.2V301l-11.1-8.9-11.1 8.9v-14.2l-13.8-3.2 11.1-8.8-6.2-12.8 13.9 3.2zM376.1 116.1l6.2 12.9 13.8-3.2-6.2 12.8 11.2 8.8-13.9 3.1v14.3l-11.1-8.9-11.1 8.9.1-14.3-13.9-3.1 11.1-8.8-6.2-12.8L370 129zM413.1 38.3l6.2 12.8 13.8-3.2-6.2 12.8 11.2 8.9-13.9 3.1v14.2L413.1 78 402 86.9l.1-14.2-13.9-3.1 11.1-8.9-6.2-12.8 13.9 3.2zM464.9 96.7l6.2 12.8 13.9-3.2-6.3 12.8 11.2 8.9-13.9 3.1.1 14.2-11.2-8.9-11.1 8.9.1-14.2L440 128l11.2-8.9-6.3-12.8 13.9 3.2zM436.9 164.8l4.9 14.8h15.6l-12.6 9.2 4.8 14.9-12.7-9.2-12.6 9.2 4.8-14.9-12.6-9.2h15.6z"></path></g><path fill="#FFDA44" d="M306.8 254.7c-49.2 0-89.1-39.9-89.1-89.1s39.9-89.1 89.1-89.1c15.3 0 29.8 3.9 42.4 10.7C329.4 67.9 302.3 56 272.5 56c-60.5 0-109.6 49.1-109.6 109.6S212 275.3 272.5 275.3c29.8 0 56.9-11.9 76.6-31.3-12.6 6.8-27 10.7-42.3 10.7zM140.4 59.5C129.7 41 109.7 28.6 86.8 28.6S44 41 33.3 59.5h107.1zM140.6 59.9l-53.8 53.8-53.7-53.8C28 68.9 25 79.3 25 90.5c0 34.2 27.7 61.9 61.9 61.9s61.9-27.7 61.9-61.9c-.1-11.2-3.1-21.6-8.2-30.6z"></path><path fill="#A2001D" d="M71.4 98.2v52.2c4.9 1.3 10.1 1.9 15.5 1.9s10.5-.7 15.5-1.9V98.2h-31z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Cocos (Keeling) Islands +61</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#FFDA44" d="M0 85.337h512v341.326H0z"></path><path fill="#D80027" d="M0 343.096h512v83.567H0z"></path><path fill="#0052B4" d="M0 256h512v87.096H0z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Colombia +57</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#0052B4" d="M0 85.337h512v341.326H0z"></path><path fill="#FFDA44" d="M0 85.337h512v85.337H0z"></path><path fill="white" d="M0 170.663h512V256H0z"></path><path fill="#D80027" d="M0 256h512v85.337H0z"></path><path fill="#6DA544" d="M256 256.006L0 426.668V85.331z"></path><g fill="white"><path d="M68.638 256c0-24.865 17.476-45.638 40.812-50.734a52.059 52.059 0 00-11.13-1.208c-28.688 0-51.942 23.255-51.942 51.942s23.255 51.942 51.942 51.942c3.822 0 7.543-.425 11.13-1.208-23.337-5.096-40.812-25.869-40.812-50.734z"></path><path d="M108.877 211.478l2.762 8.503h8.94l-7.232 5.256 2.762 8.502-7.232-5.255-7.234 5.255 2.764-8.502-7.234-5.256h8.94zM108.877 233.739l2.762 8.503h8.94l-7.232 5.255 2.762 8.503-7.232-5.255-7.234 5.255 2.764-8.503-7.234-5.255h8.94zM108.877 256l2.762 8.503h8.94l-7.232 5.255 2.762 8.503-7.232-5.255-7.234 5.255 2.764-8.503-7.234-5.255h8.94zM108.877 278.261l2.762 8.502h8.94l-7.232 5.256 2.762 8.503-7.232-5.255-7.234 5.255 2.764-8.503-7.234-5.256h8.94z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Comoros +269</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#D80027" d="M0 85.331h512v341.337H0z"></path><path fill="#6DA544" d="M443.726 85.331L102.4 426.657H0V85.331z"></path><path fill="#FFDA44" d="M500.124 85.331L158.798 426.657H11.876L353.202 85.331z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Congo +242</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#0052B4" d="M0 85.332h512v341.337H0z"></path><g fill="white"><path d="M384 156.705l5.283 16.254h17.089l-13.826 10.045 5.281 16.254L384 189.211l-13.825 10.047 5.28-16.254-13.825-10.045h17.089zM313.791 185.786l15.228 7.758 12.084-12.083-2.673 16.879 15.227 7.759-16.879 2.673-2.674 16.88-7.76-15.227-16.878 2.673 12.086-12.084zM284.71 255.995l16.254-5.281.001-17.089 10.044 13.825 16.254-5.282-10.046 13.827 10.046 13.826-16.254-5.28-10.044 13.825v-17.09zM313.791 326.204l7.759-15.229-12.084-12.084 16.881 2.674 7.757-15.227 2.674 16.879 16.879 2.672-15.227 7.759 2.673 16.882-12.084-12.087zM384 355.284l-5.281-16.253h-17.091l13.827-10.045-5.28-16.254L384 322.776l13.827-10.044-5.281 16.254 13.826 10.045h-17.089zM454.209 326.204l-15.229-7.758-12.083 12.084 2.673-16.882-15.227-7.756 16.879-2.675 2.675-16.879 7.756 15.227 16.881-2.674-12.086 12.085zM483.29 255.995l-16.254 5.281v17.09l-10.045-13.826-16.254 5.281 10.046-13.826-10.046-13.827 16.254 5.282 10.045-13.825v17.089zM454.209 185.788l-7.757 15.226 12.082 12.084-16.881-2.673-7.756 15.227-2.675-16.88-16.879-2.675 15.227-7.757-2.673-16.878 12.084 12.082zM0 186.665v16h46.069L0 233.377v7.539l57.377-38.252H80L0 255.998h112v-69.334H0zm96 69.331H22.628L96 207.083v48.913zM176 138.665l80-53.334H144v69.334h112v-16h-46.069L256 107.951v-7.539l-57.377 38.251H176v.002zm-16-53.332h73.372L160 134.246V85.333zM144 255.998h112l-80-53.334h22.623L256 240.917v-7.539l-46.069-30.713H256v-16H144v69.333zm16-48.915l73.372 48.913H160v-48.913zM112 85.331H0l80 53.334H57.377L0 100.413v7.539l46.069 30.712H0v16h112V85.331zm-16 48.915L22.628 85.333H96v48.913z"></path></g><g fill="#D80027"><path d="M144 85.331h-32v69.334H0v32h112v69.333h32v-69.333h112v-32H144z"></path><path d="M80 138.665L0 85.331v15.082l57.377 38.252zM176 138.665h22.623L256 100.413V85.331zM57.377 202.665L0 240.917v15.081l80-53.333zM176 202.665l80 53.333v-15.081l-57.377-38.252z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Cook Islands +682</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="white" d="M0 85.331h512v341.326H0z"></path><path fill="#D80027" d="M0 211.473h512v89.043H0z"></path><g fill="#0052B4"><path d="M0 352.462h512v74.207H0zM0 85.331h512v74.207H0z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Costa Rica +506</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="white" d="M0 85.331h512v341.326H0z"></path><path fill="#6DA544" d="M330.207 85.331H512v341.337H330.207z"></path><path fill="#FF9811" d="M0 85.331h181.793v341.337H0z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Cote d'Ivoire +225</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342"><path fill="white" d="M0 0h513v342H0z"></path><path fill="#D80027" d="M0 0h513v114H0z"></path><path fill="#0052B4" d="M0 228h513v114H0z"></path><g fill="#338AF3"><path d="M309.3 113.2v-44l17.5-14.4 17.7 14.4v44zM203.7 113.2v-44l-17.3-14.4-17.9 14.4v44zM238.9 113.2v-44l17.6-14.4 17.6 14.4v44z"></path></g><g fill="#0052B4"><path d="M309.3 113.2h-35.2v-44l17.5-14.4 17.7 14.4zM238.9 113.2h-35.2v-44l17.5-14.4 17.7 14.4z"></path></g><path stroke="#D80027" fill="white" d="M168.5 113.2v101.9c0 24.3 14.4 46.2 35.4 59.4 21.3 13.4 42.1 14.7 52.6 14.7s31.4-1.7 52.6-14.8c21-13 35.4-35.1 35.4-59.3V113.2h-176z"></path><g fill="#D80027"><path d="M168.5 113.2h35.2v35.2h-35.2zM238.9 113.2h35.2v35.2h-35.2zM309.3 113.2h35.2v35.2h-35.2zM203.7 148.4h35.2v35.2h-35.2zM274.1 148.4h35.2v35.2h-35.2zM168.5 183.6h35.2v35.2h-35.2zM203.7 218.8h35.2V254h-35.2zM238.9 183.6h35.2v35.2h-35.2zM309.3 183.6h35.2v35.2h-35.2zM274.1 218.8h35.2V254h-35.2zM309.3 274.3c8.6-5.4 16.2-12.3 22-20.3h-22v20.3zM181.7 254c5.8 8 13.3 14.9 22 20.4V254h-22zM238.9 254v33.7c7.2 1.2 13.3 1.5 17.6 1.5 4.3 0 10.4-.3 17.6-1.6V254h-35.2z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Croatia +385</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 341.3"><path fill="#FF9811" d="M0-40.8v422.9-211.4z"></path><path fill="white" d="M0 0h512v341.3H0z"></path><g fill="#0052B4"><path d="M0 0h512v68.3H0zM0 136.5h512v68.3H0zM0 273.1h512v68.3H0z"></path></g><path fill="#D80027" d="M256 170.7L0 341.3V0z"></path><path fill="white" d="M81.5 94.8l16.9 51.9H153l-44.2 32.1 16.9 52-44.2-32.1-44.2 32.1 16.9-52L10 146.7h54.6z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Cuba +53</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 341.3"><path fill="white" d="M0 0h512v341.3H0z"></path><path fill="#6DA544" d="M371.5 275.9l-11.1-15c-22.4 16.1-67.7 35.8-104.3 35.8-35.8 0-79.6-17.1-104.3-35.8l-11.1 15c10 10.3 46.9 27 88.4 38.4-3.9 6-1.6 6.1 2.6 10.8 8.5-6.6 17.4-1.5 24.9-7.3 7.5 5.8 16.3.7 24.9 7.3 5.4-5.6 5.4-5.6 2.5-11.1 41-11.7 77-27.6 87.5-38.1z"></path><path fill="#DB7D00" d="M113.7 168.7s.2 79.9 89 77.8L208 263h10.6s-8.9-49 71.7-49.4c0 0 0-32.9 32.9-32.9h49.4S294 119 442.8 40.1l2.2-15.6s-154.8 84.6-237 68.1c0 0 12.7 50.7-12.9 50.7-12.8 0-11.6-9.6-38.4-9.6-22.3 0-20.6 23.5-31.3 23.2S103 142.3 102 144.8s11.7 23.9 11.7 23.9z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Cyprus +357</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#0052B4" d="M0 85.337h512v341.326H0z"></path><path fill="#D80027" d="M512 256v170.663H0L215.185 256z"></path><path fill="white" d="M512 85.337V256H215.185L0 85.337z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Czech Republic +420</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 341.3"><path fill="#338AF3" d="M0 0h512v341.3H0z"></path><path fill="#FFDA44" d="M512 66.9V0H411.7L0 274.4v66.9h100.3z"></path><path fill="#D80027" d="M512 0v40.1L60.2 341.3H0v-40.1L451.8 0z"></path><path fill="#FFDA44" d="M93.6 31.2l16.3 50.4H163l-42.9 31.2 16.4 50.5-42.9-31.2-43 31.2L67 112.8 24.1 81.6h53.1z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Democratic Republic of the Congo +243</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342"><path fill="#D80027" d="M0 0h513v342H0z"></path><path fill="white" d="M190 0h-60v140H0v60h130v142h60V200h323v-60H190z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Denmark +45</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 341.3"><path fill="#6DA544" d="M0 0h512v341.3H0z"></path><path fill="#338AF3" d="M512 0v166.7L0 170.8V0z"></path><path fill="white" d="M256 170.7L0 341.3V0z"></path><path fill="#D80027" d="M89.8 92.5l17 52.4H162l-44.6 32.5 17 52.4-44.6-32.4-44.6 32.4 17-52.4-44.6-32.5h55.2z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Djibouti +253</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 341.3"><path fill="#496E2D" d="M0 0h512v341.3H0z"></path><path d="M0 110.7v120h512v-120z"></path><path fill="#FFDA44" d="M0 110.7h512v40H0z"></path><path fill="white" d="M0 190.7h512v40H0z"></path><path d="M196 0h120v341.3H196z"></path><path fill="#FFDA44" d="M196 0h40v341.3h-40z"></path><path fill="white" d="M274.7 0h40v341.3h-40z"></path><circle fill="#D80027" cx="256" cy="170.7" r="123.1"></circle><g fill="#496E2D"><path d="M256 58.6l4.6 14.2h15l-12.1 8.9 4.6 14.2-12.1-8.8-12.1 8.8 4.6-14.2-12.1-8.9h15zM190.1 80l12.2 8.8 12.1-8.8-4.6 14.3 12.1 8.8h-15l-4.6 14.2-4.7-14.2h-15l12.1-8.8zM149.4 136h15l4.6-14.2 4.7 14.2h15l-12.2 8.8 4.7 14.3-12.2-8.8-12.1 8.8 4.6-14.3zM149.4 205.3l12.1-8.8-4.6-14.3L169 191l12.2-8.8-4.7 14.3 12.2 8.8h-15l-4.7 14.3-4.6-14.3zM190.1 261.4l4.6-14.3-12.1-8.8h15l4.7-14.3 4.6 14.3h15l-12.1 8.8 4.6 14.3-12.1-8.9zM256 282.8l-4.6-14.3h-15l12.1-8.8-4.6-14.3 12.1 8.8 12.1-8.8-4.6 14.3 12.1 8.8h-15zM321.9 261.4l-12.2-8.9-12.1 8.9 4.6-14.3-12.1-8.8h15l4.6-14.3 4.7 14.3h15l-12.1 8.8zM362.6 205.3h-15l-4.6 14.3-4.7-14.3h-15l12.2-8.8-4.7-14.3L343 191l12.1-8.8-4.6 14.3zM362.6 136l-12.1 8.8 4.6 14.3-12.1-8.8-12.2 8.8 4.7-14.3-12.2-8.8h15l4.7-14.2 4.6 14.2zM321.9 80l-4.6 14.3 12.1 8.8h-15l-4.7 14.2-4.6-14.2h-15l12.1-8.8-4.6-14.3 12.1 8.8z"></path></g><path fill="#496E2D" d="M279.3 168.7c-11-21.1-14.5-25.1-14.5-25.1s.4-9.7.4-15.6c0-8.8-7.4-15.8-16.5-15.8-8.6 0-15.7 2.9-16.5 11-4.2.9-8.6 4.1-8.6 10.7 0 4.8 1 7.3 5.2 9.3 2.1-4.6 4.3-4.8 9.3-6.4.8.6 1.7 3 2.6 3.4l.3 1s-13.3 6.6-13.3 30.9c0 29.5 22 45.4 22 45.4l-1.8.3-1.9 7.1h22v-7.2l11 17.5c.3-.3 10.2-47.6.3-66.5z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Dominica +1767</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 341.3"><path fill="white" d="M0 0h512v341.3H0z"></path><path fill="#D80027" d="M0 215.2h211.5v126.1H0z"></path><path fill="#0052B4" d="M0 0h211.5v126.2H0z"></path><path fill="#D80027" d="M300.5 0H512v126.2H300.5z"></path><path fill="#0052B4" d="M300.5 215.2H512v126.1H300.5z"></path><g stroke="white" stroke-width="5" stroke-miterlimit="10"><path fill="#0052B4" d="M256 130h-49.9v49.4s19.5 6 49.9 6V130z"></path><path fill="#D80027" d="M206.1 179.4v6c0 27.5 22.3 49.9 49.9 49.9v-49.9c-30.4 0-49.9-6-49.9-6z"></path><path fill="#0052B4" d="M256 235.3c27.5 0 49.9-22.3 49.9-49.9v-6s-19.5 6-49.9 6v49.9z"></path><path fill="#D80027" d="M256 130v55.4c30.4 0 49.9-6 49.9-6V130H256z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Dominican Republic +1849</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 341.3"><path fill="#FFDA44" d="M0 0h512v341.3H0z"></path><path fill="#0052B4" d="M0 170.7h512V256H0z"></path><path fill="#D80027" d="M0 256h512v85.3H0z"></path><circle fill="#FFDA44" cx="256" cy="170.7" r="59.4"></circle><path fill="#4C1F00" d="M369.2 79.9s-27.2-13.8-33.9-16c-6.7-2.2-49.1-13.2-49.1-7 0 10.3-13.5 12-15.5 12s-2-5.3-14.8-5.3-13.7 4.8-15.8 4.8c-2.2 0-14.5-1-14.5-11.5 0-5.2-42.9 4-49.1 7-6.1 3.1-33.9 16-33.9 16s45.8 2.7 53.9 6.2 43.8 16.5 43.8 16.5l-2.8 13.3h37.8l-3.8-13.3s35.1-12.7 43.8-16.5 53.9-6.2 53.9-6.2z"></path><path fill="#57BA17" d="M217.7 171.7c0 21.1 17.2 38.3 38.3 38.3 21.1 0 38.3-17.2 38.3-38.3v-11.5h-76.5v11.5z"></path><path fill="#338AF3" d="M256 110.5c-21.1 0-38.3 17.2-38.3 38.3v11.5h76.5v-11.5c.1-21.1-17.1-38.3-38.2-38.3z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Ecuador +593</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 341.3"><path fill="white" d="M0 0h512v341.3H0z"></path><path fill="#D80027" d="M0 0h512v113.8H0z"></path><path d="M0 227.6h512v113.8H0z"></path><path fill="#C09300" d="M220.3 204.4s0-58.4 4.5-64.7c3.1-4.3 16.8 5.2 22.7 4.5 0 0 4.2-7.5 4.5-12 .3-4.6-1.1-7.6-4.9-6.2 0 0-1.2-2.1.5-3.3 1.6-1.2 5.6.1 5.6.1s-.5-1 1.6-.9c2.9.2 7.2 1.4 7.4 5.6.2 3.1.3 7.7.4 8.7.7 6.8 2.7 8.7 2.7 8.7s18.4-9.2 22-5.2c3.3 3.8 4.5 64.7 4.5 64.7l-18.1-16.8 12.1 29.5s-14.4 2.4-28.9 2.4c-14.5 0-31.1-4.2-31.1-4.2l13.8-28.2-19.3 17.3z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Egypt +20</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="white" d="M0 85.337h512v341.326H0z"></path><g fill="#0052B4"><path d="M0 85.337h512v113.775H0zM0 312.888h512v113.775H0z"></path></g><path fill="#FFDA44" d="M228.582 261.936L256 214.447l27.418 47.489z"></path><path fill="#6DA544" d="M291.616 277.616L256 295.425l-35.616-17.809v-23.744h71.232z"></path><path fill="#FFDA44" d="M289.579 216.485l-12.592 12.592c5.37 5.372 8.693 12.791 8.693 20.988 0 16.392-13.289 29.68-29.68 29.68-16.392 0-29.68-13.289-29.68-29.68 0-8.195 3.322-15.616 8.693-20.988l-12.592-12.592c-8.594 8.594-13.91 20.466-13.91 33.579 0 26.228 21.261 47.489 47.489 47.489s47.489-21.261 47.489-47.489c0-13.114-5.316-24.987-13.91-33.579z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">El Salvador +503</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342"><path fill="white" d="M0 0h513v342H0z"></path><path fill="#6DA544" d="M0 0h513v113.8H0z"></path><path fill="#D80027" d="M0 227.6h513V342H0z"></path><path fill="#0070C8" d="M126 170.7L0 341.3V0z"></path><path fill="none" stroke="black" stroke-miterlimit="10" d="M233.8 139.4v40.4c0 35.6 35.6 35.6 35.6 35.6s35.6 0 35.6-35.6v-40.4h-71.2z"></path><path fill="#786145" d="M264.5 179.8h9.8l4 25.8h-17.8z"></path><path fill="#6DA544" d="M287.2 162c0-9.8-8-14.8-17.8-14.8s-17.8 5-17.8 14.8c-4.9 0-8.9 4-8.9 8.9s4 8.9 8.9 8.9h35.6c4.9 0 8.9-4 8.9-8.9s-4-8.9-8.9-8.9z"></path><g fill="#FFDA00" stroke="black" stroke-miterlimit="10"><path d="M230.7 120l1.9 3.3h3.8l-1.9 3.3 1.9 3.2h-3.8l-1.9 3.3-1.9-3.3H225l1.9-3.2-1.9-3.3h3.8zM246 120l1.9 3.3h3.7l-1.9 3.3 1.9 3.2h-3.7l-1.9 3.3-1.9-3.3h-3.8l1.9-3.2-1.9-3.3h3.8zM261.3 120l1.9 3.3h3.7l-1.9 3.3 1.9 3.2h-3.7l-1.9 3.3-1.9-3.3h-3.8l1.9-3.2-1.9-3.3h3.8zM277.1 120l1.9 3.3h3.8l-1.9 3.3 1.9 3.2H279l-1.9 3.3-1.9-3.3h-3.7l1.8-3.2-1.8-3.3h3.7zM293.1 120l1.9 3.3h3.8l-1.9 3.3 1.9 3.2H295l-1.9 3.3-1.9-3.3h-3.7l1.8-3.2-1.8-3.3h3.7zM308.1 120l1.9 3.3h3.7l-1.9 3.3 1.9 3.2H310l-1.9 3.3-1.9-3.3h-3.8l1.9-3.2-1.9-3.3h3.8z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Equatorial Guinea +240</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 341.3"><path fill="#338AF3" d="M0 0h512v341.3H0z"></path><path fill="#56AF35" d="M0 0h512v170.7H0z"></path><path fill="#D80027" d="M0 341.3l512-170.7L0 0v341.3z"></path><g fill="#ffc945"><path d="M134.7 231.5c33.6 0 60.8-27.2 60.8-60.8s-27.2-60.8-60.8-60.8-60.8 27.2-60.8 60.8 27.2 60.8 60.8 60.8zm0 24.3c-47 0-85.2-38.1-85.2-85.2s38.1-85.2 85.2-85.2 85.2 38.1 85.2 85.2-38.2 85.2-85.2 85.2z"></path><circle cx="119.5" cy="148.3" r="17.5"></circle><circle cx="148.9" cy="158.5" r="17.5"></circle><circle cx="134.7" cy="135.2" r="17.5"></circle><circle cx="119.5" cy="172.7" r="17.5"></circle><circle cx="149.9" cy="182.8" r="17.5"></circle><circle cx="122.5" cy="198" r="17.5"></circle><circle cx="145.9" cy="205.2" r="17.5"></circle></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Eritrea +291</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#111" d="M0 85.337h512v341.326H0z"></path><path fill="#368FD8" d="M0 85.337h512v113.775H0z"></path><path fill="white" d="M0 312.888h512v113.775H0z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Estonia +372</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 600"><path fill="#2B5DEA" d="M0 0h900v600H0V0z"></path><path fill="#FFDF29" d="M0 100h900v400H0V100z"></path><path fill="#D70000" d="M0 150h900v300H0V150z"></path><path fill="white" d="M450 171.4v257.2c114.3 0 171.4-85.7 214.3-128.6-42.9-42.9-100-128.6-214.3-128.6z"></path><path d="M450 171.4c-100 0-171.4 85.7-214.3 128.6C278.6 342.9 350 428.6 450 428.6V171.4z"></path><path fill="white" d="M346.3 254.3h21v91.3h-21zM398.2 254.3h21v91.3h-21z"></path><path d="M477.8 254.3h21v91.3h-21zM529.7 254.3h21v91.3h-21z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Eswatini +268</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.5 15"><path fill="#20AA46" d="M0 0h22.5v5H0V0z"></path><path fill="#E92F3B" d="M0 10h22.5v5H0v-5z"></path><path fill="#FADF50" d="M0 5h22.5v5H0V5z"></path><circle fill="#205CCA" cx="11.3" cy="7.5" r="5.2"></circle><path fill="#FFDB3D" d="M11.2 9.2L8.8 11l.9-2.9-2.4-1.8h3l1-2.8 1 2.9h3l-2.4 1.8.9 2.9-2.6-1.9zm0-1l.9.6-.3-1.1.9-.7h-1.1l-.4-1.1-.4 1.1H9.7l.9.7-.3 1.1c0 .1.9-.6.9-.6z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Ethiopia +251</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 341.3"><path fill="#0052B4" d="M0 0h512v341.3H0z"></path><path fill="white" d="M256 0v30.6l-45.2 25.1H256V115h-59.1l59.1 32.8v22.9h-26.7l-73.5-40.9v40.9h-55.6v-48.6l-87.5 48.6H0v-30.6L45.2 115H0V55.7h59.1L0 22.8V0h26.7l73.5 40.8V0h55.6v48.6L243.3 0z"></path><path fill="#D80027" d="M144 0h-32v69.3H0v32h112v69.4h32v-69.4h112v-32H144z"></path><path fill="#0052B4" d="M155.8 115L256 170.7v-15.8L184.2 115z"></path><path fill="white" d="M155.8 115L256 170.7v-15.8L184.2 115z"></path><g fill="#D80027"><path d="M155.8 115L256 170.7v-15.8L184.2 115zM71.8 115L0 154.9v15.8L100.2 115z"></path></g><path fill="#0052B4" d="M100.2 55.6L0 0v15.7l71.8 39.9z"></path><path fill="white" d="M100.2 55.6L0 0v15.7l71.8 39.9z"></path><g fill="#D80027"><path d="M100.2 55.6L0 0v15.7l71.8 39.9zM184.2 55.6L256 15.7V0L155.8 55.6z"></path></g><path fill="#1F8BDE" d="M312.2 194.2v-90c0-8.5 6.5-15.3 15-15.3h120.5c8.3 0 15 6.8 15 15.3v90c0 75.2-75.2 105.3-75.2 105.3s-75.3-30.1-75.3-105.3z"></path><path fill="white" d="M312.2 194.2v-90c0-8.5 6.5-15.3 15-15.3h120.5c8.3 0 15 6.8 15 15.3v90c0 75.2-75.2 105.3-75.2 105.3s-75.3-30.1-75.3-105.3zm79.6 86.3c7.9-4.5 15.9-10 23.2-16.7 20.5-18.5 32.6-41.4 32.6-69.7v-90c0-.3-120.4-.3-120.4-.3v90.3c0 28.3 12.1 51.2 32.6 69.7 8.3 7.5 17.6 13.9 27.6 19 1.4-.6 2.8-1.4 4.4-2.3z"></path><path fill="#187536" d="M347.1 193.4c-2.6-7.9 1.7-14.3 10.1-14.3h60.5c8.2 0 12.8 6.3 10.1 14.3l-5.5 16.5c-2.6 7.9-8.9 9.2-15.8 4 0 0 2.6-4.8-19.1-4.8-21.7 0-19.1 4.8-19.1 4.8-6.1 5.7-13.1 4-15.8-4 .1.1-5.4-16.5-5.4-16.5z"></path><path fill="white" d="M357.4 179.1c8.1 1.6 17.8-15 30.1-15 13.1 0 21.8 17.1 30.1 15 7.4-1.8 15-22.2 15-30.1 0-16.6-20.2-30.1-45.1-30.1-24.9 0-45.1 13.5-45.1 30.1-.1 8.5 6.6 28.5 15 30.1zM356 270.7c6.2.4 12.5-1.8 17.2-6.5l9-9c2.9-2.9 7.5-2.9 10.4 0l9 9c4.7 4.7 11 6.9 17.1 6.5 5.3-.3 32.5-33.5 25.7-32.6-4.6.6-9.1 2.8-12.7 6.3l-.1.1-9 9c-2.9 2.9-7.5 2.9-10.4 0l-9-9c-8.7-8.8-22.9-8.8-31.7-.1l-.1.1-9 9c-2.9 2.9-7.5 2.9-10.4 0l-9-9c-3.5-3.5-7.8-5.6-12.3-6.3-6.7-1.1 20.1 32.2 25.3 32.5zM322.1 210c2.9-2.9 7.5-2.9 10.4 0l9 9c8.8 8.7 22.9 8.7 31.7 0l9-9c2.9-2.9 7.5-2.9 10.4 0l9 9c8.8 8.7 22.9 8.7 31.7 0l9-9c2.9-2.9 7.5-2.9 10.4 0 0 0 5.5-14.8 2.5-15.9-7.9-2.9-17.2-1.2-23.5 5.2l-.1.1-9 9c-2.9 2.9-7.5 2.9-10.4 0l-9-9c-8.7-8.8-22.9-8.8-31.7-.1l-.1.1-9 9c-2.9 2.9-7.5 2.9-10.4 0l-9-9c-6.2-6.2-15.1-8-22.8-5.5-3.1 1.1 1.9 16.1 1.9 16.1z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Falkland Islands (Malvinas) +500</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 341.3"><path fill="white" d="M0 0h512v341.3H0z"></path><path fill="#0F61A5" d="M512 214.5H206.2v126.8H118.4V214.5H0v-87.7h118.4V0H206.2v126.8H512V192z"></path><path fill="#E50E3D" d="M512 149.3V192H183.7v149.3H141V192H0v-42.7h141V0h42.7v149.3z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Faroe Islands +298</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 341.3"><path fill="#2E52B2" d="M0 0h512v341.3H0z"></path><path fill="white" d="M256 0v22.6l-46.1 30.7H256v64h-46.1L256 148v22.7h-22.6l-73.4-49v49H96v-49l-73.4 49H0V148l46.1-30.7H0v-64h46.1L0 22.6V0h22.6L96 48.9V0h64v48.9L233.4 0z"></path><g fill="#D80027"><path d="M144 0h-32v69.3H0v32h112v69.4h32v-69.4h112v-32H144z"></path><path d="M0 0v15.1l57.4 38.2H80zM256 0v15.1l-57.4 38.2H176z"></path><path d="M0 0v15.1l57.4 38.2H80zM256 0v15.1l-57.4 38.2H176zM0 170.7v-15.1l57.4-38.3H80zM256 170.7v-15.1l-57.4-38.3H176z"></path></g><path fill="#F3F3F3" d="M307.1 127.1v92c0 61.6 80.5 80.5 80.5 80.5s80.4-19 80.4-80.6v-92l-80.5-23-80.4 23.1z"></path><path fill="#D80027" d="M468 132.8V98.3H307.1v34.5h69v69h-69v23h69V296c6.9 2.5 11.5 3.5 11.5 3.5s4.6-1.1 11.5-3.5v-71.2h69v-23h-69v-69H468z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Fiji +679</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 341.3"><path fill="white" d="M0 0h512v341.3H0z"></path><path fill="#2E52B2" d="M512 129.3V212H203.7v129.3H121V212H0v-82.7h121V0h82.7v129.3z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Finland +358</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="white" d="M0 85.331h512v341.337H0z"></path><path fill="#0052B4" d="M0 85.331h170.663v341.337H0z"></path><path fill="#D80027" d="M341.337 85.331H512v341.337H341.337z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">France +33</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 60"><path fill="#FDEB01" d="M0 0l90 60H0z"></path><path fill="#58A846" d="M90 0v60L0 0z"></path><path fill="#ED3D24" stroke="#A02021" stroke-miterlimit="10" d="M54.1 35.3l14.7-10.7H50.6L45 7.3l-5.6 17.3H21.2l14.7 10.7-5.6 17.4L45 42l14.7 10.7z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">French Guiana +594</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="white" d="M0 85.337h512v341.326H0z"></path><g fill="#D80027"><path d="M0 85.337h512v113.775H0zM0 312.888h512v113.775H0z"></path></g><path fill="#FFDA44" d="M293.991 256c0 20.982-17.01 33.243-37.992 33.243S218.008 276.982 218.008 256s17.01-37.992 37.992-37.992 37.991 17.01 37.991 37.992z"></path><path fill="#0052B4" d="M293.991 256c0 20.982-17.01 37.992-37.992 37.992s-37.992-17.01-37.992-37.992"></path><g fill="#D80027"><path d="M232.259 246.506h9.498v19h-9.498zM270.247 246.506h9.498v19h-9.498zM251.247 232.259h9.498v33.243h-9.498z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">French Polynesia +689</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#FFDA44" d="M0 85.337h512v341.326H0z"></path><path fill="#6DA544" d="M0 85.337h512v113.775H0z"></path><path fill="#0052B4" d="M0 312.888h512v113.775H0z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Gabon +241</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="white" d="M0 85.337h512v341.326H0z"></path><path fill="#1a7e25" d="M0 322.783h512v103.88H0z"></path><path fill="#cf0d19" d="M0 85.337h512v104.515H0z"></path><path fill="#0052B4" d="M0 210.877h512v89.656H0z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Gambia +220</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.5 15"><path fill="white" d="M.8 0h21v15H.8V0z"></path><path fill="#eb000e" d="M9.8 6H0v3h9.8v6h3V9h9.8V6h-9.8V0h-3v6z"></path><path fill="#eb000e" d="M17.3 2.7l-.2-1.2h1l-.2 1.2 1.2-.2v1l-1.2-.2.2 1.2h-1l.2-1.2-1.2.2v-1l1.2.2zm-12.7 0l-.2-1.2h1l-.2 1.2 1.2-.2v1l-1.2-.2.2 1.2h-1l.2-1.2-1.2.2v-1l1.2.2zm0 9l-.2-1.2h1l-.2 1.2 1.2-.2v1l-1.2-.2.2 1.2h-1l.2-1.2-1.2.2v-1l1.2.2zm12.7 0l-.2-1.2h1l-.2 1.2 1.2-.2v1l-1.2-.2.2 1.2h-1l.2-1.2-1.2.2v-1l1.2.2z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Georgia +995</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#FFDA44" d="M0 85.337h512v341.326H0z"></path><path fill="#D80027" d="M0 85.337h512v113.775H0z"></path><path fill="#496E2D" d="M0 312.888h512v113.775H0z"></path><path d="M255.883 199.111l14.119 43.458 40.366 3.2-36.969 26.861 19.453 40.259-36.969-26.859-36.97 26.859 14.123-43.459-36.969-26.861h45.696z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Ghana +233</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342"><path fill="white" d="M0 0h513v342H0z"></path><path fill="#D80027" d="M0 230h513v112H0z"></path><path fill="#D80027" stroke="black" stroke-miterlimit="10" d="M363.1 131.8V99.1H374V77.3h-21.9v10.9h-21.8V77.3h-21.8v21.8h10.9v32.7h-21.8V55.5h10.9V33.7h-21.8v10.9h-10.9V33.7H254v10.9h-10.9V33.7h-21.8v21.8h10.9v76.3h-21.8V99.1h10.9V77.3h-21.8v10.9h-21.8V77.3h-21.8v21.8h10.9v32.7H145V219h239.9v-87.2z"></path><path fill="#FFDA44" stroke="black" stroke-miterlimit="10" d="M264.9 235.5l-24.2 18.2 19.1 14.3v31.3h-23.2v9h23v7.9h-23v9.3H270V268l19.1-14.3-24.2-18.2zm0 25.3l-10.1-7.1 10.1-7.1 10.1 7.1-10.1 7.1z"></path><path d="M239.6 209.7v-27.9s.1-22.3 25-22.3c24.8 0 25.7 22 25.7 22v28.2h-50.7zM170.5 209.7v-24.3s.1-18.7 19.6-18.7 20.2 18.4 20.2 18.4v24.5h-39.8z"></path><path d="M169.1 209.7v-24.3s.1-18.7 19.6-18.7 20.2 18.4 20.2 18.4v24.5h-39.8zM320.9 209.7v-24.3s.1-18.7 19.6-18.7 20.2 18.4 20.2 18.4v24.5h-39.8zM329.3 132v-15.7s.1-12.1 11.3-12.1c11.3 0 11.7 11.9 11.7 11.9V132h-23zM250.5 132v-23.7s.1-18.3 14.3-18.3c14.2 0 14.7 18 14.7 18v24h-29zM177.5 132v-15.7s.1-12.1 11.3-12.1 11.7 11.9 11.7 11.9V132h-23z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Gibraltar +350</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342"><path fill="white" d="M0 0h513v342H0z"></path><g fill="#1571CC"><path d="M0 0h513v38H0zM0 76h513v38H0zM0 152h513v38H0zM0 228h513v38H0zM0 304h513v38H0z"></path></g><path fill="#1571CC" d="M0 0h190v190H0z"></path><g fill="white"><path d="M0 76h190v38H0z"></path><path d="M76 0h38v190H76z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Greece +30</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342"><path fill="#D80027" d="M0 0h513v342H0z"></path><path fill="white" d="M513 0v171H0V0z"></path><circle fill="white" cx="185.8" cy="171.2" r="117.8"></circle><path fill="#D80027" d="M68 171c0-65.1 52.8-117.8 117.8-117.8 65.1 0 117.8 52.8 117.8 117.8"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Greenland +299</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 341.3"><path fill="#c60a0a" d="M0 0h512v341.3H0z"></path><path fill="#3E8446" d="M256 170.7L44.5 296.8V44.5z"></path><g fill="#FFDA44"><path d="M256 170.7l211.5 126.1h-423zM467.5 44.5L256 170.7 44.5 44.5z"></path></g><path fill="#3E8446" d="M467.5 44.5v252.3L256 170.7z"></path><g fill="#FFDA44"><path d="M256 10.4l3.3 10.2H270l-8.6 6.3 3.3 10.2-8.7-6.3-8.7 6.3 3.3-10.2-8.6-6.3h10.7zM170.1 10.4l3.3 10.2h10.7l-8.6 6.3 3.3 10.2-8.7-6.3-8.7 6.3 3.3-10.2-8.6-6.3h10.7zM341.9 10.4l3.3 10.2H356l-8.7 6.3 3.3 10.2-8.7-6.3-8.7 6.3 3.3-10.2-8.6-6.3h10.7zM256 304.2l3.3 10.2H270l-8.6 6.3 3.3 10.2-8.7-6.3-8.7 6.3 3.3-10.2-8.6-6.3h10.7zM170.1 304.2l3.3 10.2h10.7l-8.6 6.3 3.3 10.2-8.7-6.3-8.7 6.3 3.3-10.2-8.6-6.3h10.7zM341.9 304.2l3.3 10.2H356l-8.7 6.3 3.3 10.2-8.7-6.3-8.7 6.3 3.3-10.2-8.6-6.3h10.7z"></path></g><circle fill="#c60a0a" cx="244.5" cy="170.7" r="76.2"></circle><path fill="#FFDA44" d="M244.5 110.1l13.6 41.8h44l-35.6 25.8 13.6 41.8-35.6-25.8-35.5 25.8 13.6-41.8-35.6-25.8h44zM107.7 167.8c4.4 6.9 2.3 16.1-4.6 20.5s-16.1 2.3-20.5-4.6c-7.9-12.5-3.3-33-3.3-33s20.4 4.6 28.4 17.1z"></path><circle fill="#A2001D" cx="99.1" cy="182.1" r="7.4"></circle></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Grenada +1473</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="white" d="M0 85.331h512v341.337H0z"></path><path fill="#0052B4" d="M0 85.331h170.663v341.337H0z"></path><path fill="#D80027" d="M341.337 85.331H512v341.337H341.337z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Guadeloupe +590</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342"><path fill="#D80027" d="M0 0h512v341.3H0z"></path><path fill="#0052B4" d="M11.1 11.1h489.7v319.1H11.1z"></path><path fill="#7DBEF1" d="M256 285.3s76.4-51.3 76.4-114.6S256 56 256 56s-76.4 51.3-76.4 114.6S256 285.3 256 285.3z"></path><path fill="#1C8AE6" d="M179.8 180.7h152.6l-29.3 64.9h-95.2z"></path><path fill="#FFF042" d="M192.3 205.9s40.5 38.2 51 38.2c12.4 0 12.6-18.4 25.5-25.5 20.2-11.1 51-12.7 51-12.7L297 248.7l-41 36.6-46.8-39.7-16.9-39.7z"></path><path fill="#259C7B" d="M256 157.5l-22.5 15.6 7.9-26.2-21.8-16.5 27.4-.5 9-25.9 9 25.9 27.4.5-21.8 16.6 7.9 26.2-22.5-15.7z"></path><path fill="#8E5715" d="M249.7 144.6c-.9 9.2-1.5 18.4-1.7 27.6-.3 11.9.3 20.7 2 26 2.2 6.6 7.2 12.9 14.2 18.9 5.3 4.6 10.6 8.1 14.2 10.1 3.1 1.7 7 .6 8.7-2.4 1.7-3.1.6-7-2.4-8.7-4.3-2.5-8.4-5.4-12.2-8.7-5.4-4.6-9.1-9.2-10.4-13.3-1.1-3.4-1.6-11.3-1.4-21.7.2-8.9.8-17.8 1.7-26.6.4-3.5-2.2-6.6-5.7-7-3.6-.3-6.7 2.3-7 5.8z"></path><path fill="white" d="M217.8 170.7l25.5 38.2h-25.5v-38.2z"></path><path fill="none" stroke="#D80027" stroke-width="12" stroke-miterlimit="10" d="M256 285.3s76.4-51.3 76.4-114.6S256 56 256 56s-76.4 51.3-76.4 114.6S256 285.3 256 285.3z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Guam +1671</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342"><path fill="white" d="M0 0h513v342H0z"></path><g fill="#338AF3"><path d="M0 0h171v342H0zM342 0h171v342H342z"></path></g><circle fill="#DCC26D" cx="256" cy="155.8" r="25.5"></circle><path fill="#628A40" d="M194.2 155.9c0 22.1 11.8 42.5 30.8 53.5 5.9 3.4 13.5 1.4 16.9-4.5 3.4-5.9 1.4-13.5-4.5-16.9-11.5-6.6-18.5-18.9-18.5-32.1 0-6.8-5.5-12.4-12.4-12.4s-12.3 5.5-12.3 12.4zm95.1 52.1c17.8-11.4 28.6-31 28.5-52.1 0-6.8-5.5-12.4-12.4-12.4-6.8 0-12.4 5.5-12.4 12.4 0 12.7-6.5 24.5-17.1 31.3-5.8 3.6-7.7 11.2-4.1 17 3.6 5.8 11.2 7.7 17 4.1.2-.1.3-.2.5-.3z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Guatemala +502</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342"><path fill="white" d="M0 0h513v342H0z"></path><path fill="#D80027" d="M308 0H204v118.7H0v104h204V342h104V222.7h205v-104H308z"></path><path fill="#FFDA44" d="M368.6 188l26 17.3V136l-26 17.3h-95.3V58.1l17.3-26h-69.2l17.3 26v95.2h-95.3l-26-17.3v69.3l26-17.3h95.3v95.2l-17.3 26h69.2l-17.3-26V188z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Guernsey +44</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342"><path fill="#FFDA44" d="M0 0h512v342H0z"></path><path fill="#6DA544" d="M342 0h171v342H342z"></path><path fill="#D80027" d="M0 0h171v342H0z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Guinea +224</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#6DA544" d="M0 85.331h512v341.337H0z"></path><path fill="#FFDA44" d="M0 85.331h512v170.663H0z"></path><path fill="#D80027" d="M0 85.331h181.793v341.337H0z"></path><path d="M98.32 195.127l15.107 46.497h48.894l-39.555 28.74 15.108 46.498-39.554-28.737-39.556 28.737 15.111-46.498-39.554-28.74h48.891z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Guinea-Bissau +245</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 600"><path fill="#009E49" d="M0 0h900v600H0V0z"></path><path fill="white" d="M0 0l947 300L0 600V0z"></path><path fill="#FFD00D" d="M0 26.1L870 300 0 573.9V26.1z"></path><path fill="#2D2D2D" d="M0 0l450 300L0 600V0z"></path><path fill="#D3132F" d="M0 35l397.5 265L0 565V35z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Guyana +592</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342"><path fill="#A2001D" d="M0 0h513v172H0z"></path><path fill="#0052B4" d="M0 172h513v172H0z"></path><path fill="white" d="M381.4 251.5l-110.7-13.8-110.8 13.8V85.4h221.5z"></path><circle fill="#0052B4" cx="270.7" cy="182.3" r="55.4"></circle><circle fill="#A2001D" cx="270.7" cy="182.3" r="27.7"></circle><path fill="#6DA544" d="M229.1 113.1h83.1l-41.5 41.5z"></path><path fill="#FFDA44" d="M256.8 140.8h27.7v83h-27.7z"></path><path fill="#6DA544" d="M314.9 215.5h-88.5l-66.5 36h221.5z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Haiti +509</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#FFDA44" d="M0 85.331h512v341.326H0z"></path><path fill="white" d="M256 85.331h256v341.337H256z"></path><path fill="#ACABB1" d="M321.353 233.837l32.073 42.43c-5.053 7.651-5.026 17.961.817 25.692 7.414 9.807 21.374 11.748 31.182 4.335 9.807-7.414 11.748-21.374 4.334-31.182-5.843-7.731-15.756-10.568-24.495-7.795l-49.988-66.129-11.838 8.949-17.759 13.424 17.899 23.677 17.775-13.401zm46.175 48.78a7.421 7.421 0 118.95 11.84 7.421 7.421 0 01-8.95-11.84z"></path><path fill="#FFDA44" d="M376.367 247.24l17.899-23.677-17.759-13.424-11.838-8.949-49.988 66.129c-8.74-2.775-18.651.063-24.495 7.795-7.414 9.808-5.473 23.768 4.334 31.182 9.808 7.414 23.768 5.473 31.182-4.335 5.845-7.731 5.871-18.041.817-25.692l32.073-42.43 17.775 13.401zm-62.504 45.771a7.42 7.42 0 11-11.84-8.95 7.42 7.42 0 0111.84 8.95z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Holy See (Vatican City State) +379</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342"><path fill="white" d="M0 0h513v342H0z"></path><g fill="#338AF3"><path d="M0 0h513v114H0zM0 228h513v114H0zM203.5 117.9l6.7 16.6 17.6 1-14 10.9 4.7 17.7-15-9.9-15 9.9 4.7-17.7-14-10.9 17.6-1zM308.5 117.9l6.7 16.6 17.6 1-14 10.9 4.7 17.7-15-9.9-15 9.9 4.7-17.7-14-10.9 17.6-1zM256 147.6l6.7 16.6 17.6 1-14 10.9 4.7 17.7-15-9.9-15 9.9 4.7-17.7-14-10.9 17.6-1zM203.5 177.3l6.7 16.6 17.6 1-14 10.9 4.7 17.6-15-9.9-15 9.9 4.7-17.6-14-10.9 17.6-1zM308.5 177.3l6.7 16.6 17.6 1-14 10.9 4.7 17.6-15-9.9-15 9.9 4.7-17.6-14-10.9 17.6-1z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Honduras +504</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="white" d="M0 85.337h512v341.326H0z"></path><path fill="#D80027" d="M0 85.337h512v113.775H0z"></path><path fill="#6DA544" d="M0 312.888h512v113.775H0z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Hungary +36</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#0052B4" d="M0 85.334h512v341.337H0z"></path><path fill="white" d="M512 295.883H202.195v130.783H122.435V295.883H0V216.111h122.435V85.329H202.195v130.782H512V277.329z"></path><path fill="#D80027" d="M512 234.666v42.663H183.652v149.337h-42.674V277.329H0v-42.663h140.978V85.329h42.674v149.337z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Iceland +354</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="white" d="M0 85.337h512v341.326H0z"></path><path fill="#A2001D" d="M0 85.337h512V256H0z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Indonesia +62</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342"><path fill="white" d="M0 0h512v342H0z"></path><path fill="#6DA544" d="M0 0h513v114H0z"></path><g fill="#D80027"><path d="M0 227.9h513v114H0zM278.8 134.8c.1 2 8.7 26.2 4.4 39.4-6.6 20.3-15.8 21.8-19.8 24.5V134l-6.9-4.2-6.9 4.2v64.7c-4-2.7-12.4-2.4-19.8-24.5-4.3-12.7 5.7-37.3 5.8-39.2 0 0-9.5 8.1-15.8 24-5.9 14.8 1.9 49.6 29.5 54.8 2.3.4 4.7 5.6 7.2 5.6 2.1 0 4.1-5.2 6-5.5 28.4-4.6 35-41.7 29.9-55.6-5.4-14.6-13.6-23.5-13.6-23.5z"></path></g><g fill="white" opacity=".5"><path d="M44.6 98.9h22.3v24.4H44.6zM0 98.9h22.3v24.4H0zM89.2 98.9h22.3v24.4H89.2zM133.8 98.9h22.3v24.4h-22.3zM178.4 98.9h22.3v24.4h-22.3zM223 98.9h22.3v24.4H223zM267.7 98.9H290v24.4h-22.3zM312.3 98.9h22.3v24.4h-22.3zM356.9 98.9h22.3v24.4h-22.3zM401.5 98.9h22.3v24.4h-22.3zM446.1 98.9h22.3v24.4h-22.3zM490.7 98.9H513v24.4h-22.3zM44.6 216.9h22.3v25.5H44.6zM0 216.9h22.3v25.5H0zM89.2 216.9h22.3v25.5H89.2zM133.8 216.9h22.3v25.5h-22.3zM178.4 216.9h22.3v25.5h-22.3zM223 216.9h22.3v25.5H223zM267.7 216.9H290v25.5h-22.3zM312.3 216.9h22.3v25.5h-22.3zM356.9 216.9h22.3v25.5h-22.3zM401.5 216.9h22.3v25.5h-22.3zM446.1 216.9h22.3v25.5h-22.3zM490.7 216.9H513v25.5h-22.3z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Iran +98</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342"><path fill="white" d="M0 0h513v342H0z"></path><path fill="#CE1126" d="M0 0h513v114H0z"></path><path d="M0 228h513v114H0z"></path><g fill="#547C31"><path d="M219.2 160.7h-29.3c1.5-5.7 6.6-9.9 12.8-9.9v-19.9c-18.3 0-33.1 14.9-33.1 33.1v16.5h49.6c1.8 0 3.3 1.5 3.3 3.3v6.6h-66.2v19.9h86.1v-26.5c0-12.7-10.4-23.1-23.2-23.1zM268.8 190.5v-59.6H249v79.5h33.1v-19.9zM335 190.5v-59.6h-19.8v59.6h-6.6v-19.8h-19.9v39.7h59.6v-19.9z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Iraq +964</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342"><path fill="#E52D42" d="M0 0h513v342H0z"></path><path fill="white" d="M393.3 68.2h-45.8l-33.8 80.2-34.4-22.9s-24.7-59.1-34.4-68.2c-9.7-9.7-18.7-.6-48.9 7.8-29.6 8.4-30.8 18.7-42.2 18.7-4.8 0-19.9-17.5-27.7-22.3-12.1-7.8-16.9-4.2-13.9 7.2 1.2 4.8 10.9 10.9 16.9 19.9 7.8 11.5 12.7 25.9 12.7 25.9s10.9-10.3 16.9-12.1c9-2.4 19.3 1.8 31.4 0 15.1-2.4 31.4-10.9 31.4-10.9l4.2 43.4s-54.3 50.7-49.5 70.6 56.1 44.6 68.2 62.7c12.1 17.5-7.2 24.1-7.2 32.6s-1.8 19.9 7.2 16.3c9-3.6 10.3-18.1 18.7-31.4 6-9 10.3-13.9 11.5-17.5 1.8-9-23.5-32-37.4-48.9-6.6-7.8-19.9-18.7-19.9-18.7l39.2-29.6s67.6 27.7 82.6 18.7c15.1-9 19.3-98.3 19.3-98.3l47-11.5-12.1-11.7z"></path><path fill="#F8DD4E" d="M279.3 262.4c-6 0-11.5-4.8-11.5-11.5s4.8-11.5 11.5-11.5c6 0 11.5 4.8 11.5 11.5s-5.5 11.5-11.5 11.5zm45.8-182.8c-6 0-11.5-4.8-11.5-11.5s4.8-11.5 11.5-11.5c6 0 11.5 4.8 11.5 11.5s-5.5 11.5-11.5 11.5zm0 91.1c-6 0-11.5-4.8-11.5-11.5 0-6 4.8-11.5 11.5-11.5 6 0 11.5 4.8 11.5 11.5-.6 6.7-5.5 11.5-11.5 11.5zm-136.9 45.8c-6 0-11.5-4.8-11.5-11.5 0-6 4.8-11.5 11.5-11.5 6.6 0 11.5 4.8 11.5 11.5s-5.5 11.5-11.5 11.5zm45.2-136.9c-6 0-11.5-4.8-11.5-11.5s4.8-11.5 11.5-11.5c6 0 11.5 4.8 11.5 11.5s-4.8 11.5-11.5 11.5zm22.9 91.1c-6 0-11.5-10.3-11.5-22.9s4.8-22.9 11.5-22.9c6 0 11.5 10.3 11.5 22.9s-4.8 22.9-11.5 22.9zm-114-45.2c-6 0-11.5-4.8-11.5-11.5 0-6.6 4.8-11.5 11.5-11.5 6.6 0 11.5 4.8 11.5 11.5 0 6.6-4.8 11.5-11.5 11.5z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Isle of Man +44</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342"><path fill="white" d="M0 0h513v342H0z"></path><g fill="#2E52B2"><path d="M340.6 122.4h-56.1l-28-48.6-28 48.6h-56.1l28 48.6-28 48.6h56.1l28 48.6 28-48.6h56.1l-28-48.6 28-48.6zM293.2 171L276 204.2h-38.9L219.8 171l17.2-33.2h38.9l17.3 33.2zm-36.7-71.8l11.9 23.3h-23.9l12-23.3zm-58.3 38.6h23.9l-10.8 21-13.1-21zm0 66.4l13-22.1 11.9 22.1h-24.9zm58.3 37.5l-11.9-22.1h23.9l-12 22.1zm59.4-37.5h-25l11.9-22.1 13.1 22.1zm-26.1-66.4h26.1l-13 22.1-13.1-22.1zM0 21.3h512V64H0zM0 277.3h512V320H0z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Israel +972</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="white" d="M341.334 85.33H0v341.332h512V85.33z"></path><path fill="#6DA544" d="M0 85.333h170.663V426.67H0z"></path><path fill="#D80027" d="M341.337 85.333H512V426.67H341.337z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Italy +39</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#6DA544" d="M0 85.337h512v341.326H0z"></path><path d="M215.864 256.006L0 399.911V112.089zM512 112.089v287.822L296.136 256.006z"></path><path fill="#0052B4" d="M512 112.089L296.136 256.006 512 399.911v26.757h-40.125L256 282.752 40.125 426.668H0v-26.757l215.864-143.905L0 112.089V85.331h40.125L256 229.248 471.875 85.331H512z"></path><path fill="#FFDA44" d="M512 112.089L296.136 256.006 512 399.911v26.757h-40.125L256 282.752 40.125 426.668H0v-26.757l215.864-143.905L0 112.089V85.331h40.125L256 229.248 471.875 85.331H512z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Jamaica +1876</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="white" d="M0 85.331h512v341.337H0z"></path><circle fill="#D80027" cx="256" cy="255.994" r="96"></circle></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Japan +81</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342"><path fill="white" d="M0 0h513v342H0z"></path><path fill="#D80027" d="M301.8 171L513 30.2V0h-45.3L256.5 140.8 45.3 0H0v30.2L211.2 171 0 311.8V342h45.3l211.2-140.8L467.7 342H513v-30.2z"></path><path fill="#FFDA44" d="M233.7 44.6l22.3 5.6 22.3-5.6 4-20.9-14.9 6.5L256 14.8l-11.4 15.4-14.9-6.5z"></path><path fill="#D80027" d="M233.7 44.6s-4 12.9-4 29.9c0 27.9 26.3 41.3 26.3 41.3s26.3-15.5 26.3-41.3c0-15.4-4-29.9-4-29.9s-8.1-5-22.3-5-22.3 5-22.3 5z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Jersey +44</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="white" d="M0 85.339h512v341.326H0z"></path><path d="M0 85.339h512v113.775H0z"></path><path fill="#6DA544" d="M0 312.89h512v113.775H0z"></path><path fill="#D80027" d="M256 256.006L0 426.669V85.331z"></path><path fill="white" d="M77.913 224.802l7.876 16.469 17.786-4.11-7.965 16.426 14.303 11.343-17.808 4.014.049 18.255-14.241-11.421-14.241 11.421.05-18.255-17.809-4.014 14.303-11.343-7.965-16.426 17.786 4.11z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Jordan +962</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342"><path fill="#36B6CC" d="M0 0h513v342H0V0z"></path><circle fill="#FFD400" cx="256.5" cy="170.9" r="68.4"></circle><path fill="#FFD400" d="M256.5 251.5l-27.9 41.7-7.1-49.7-43.2 25.5 15.2-47.8-50 4.2 34.4-36.5-46.9-18 46.8-18-34.4-36.5 50 4.2-15.2-47.8 43.2 25.4 7.1-49.7 27.9 41.7 27.9-41.7 7.1 49.7 43.2-25.4-15.2 47.8 50-4.2-34.3 36.6 46.8 17.9-46.8 18 34.4 36.5-50-4.2 15.2 47.8-43.2-25.4-7.1 49.7c0-.1-27.9-41.8-27.9-41.8zm0-.8c44.1 0 79.9-35.8 79.9-79.9S300.6 91 256.5 91s-79.9 35.8-79.9 79.9 35.8 79.8 79.9 79.8zM22.8 28.3c0-3.2 2.4-5.7 5.7-5.7h11.3c3.2 0 5.7 2.4 5.7 5.7v11.3c.1 3.1-2.4 5.7-5.6 5.7H28.5c-3.1 0-5.7-2.5-5.7-5.6v-.1-11.3zm0 45.7c0-3.2 2.4-5.7 5.7-5.7h11.3c3.2 0 5.7 2.4 5.7 5.7v11.3c.1 3.1-2.4 5.7-5.6 5.7H28.5c-3.1 0-5.7-2.5-5.7-5.6V74zm0 45.6c0-3.2 2.4-5.7 5.7-5.7h11.3c3.2 0 5.7 2.4 5.7 5.7v11.3c.1 3.1-2.4 5.7-5.6 5.7H28.5c-3.1 0-5.7-2.5-5.7-5.6v-.1-11.3zm0 45.6c0-3.2 2.4-5.7 5.7-5.7h11.3c3.2 0 5.7 2.4 5.7 5.7v11.3c.1 3.1-2.4 5.7-5.6 5.7H28.5c-3.1 0-5.7-2.5-5.7-5.6v-.1-11.3zm0 45.7c0-3.2 2.4-5.7 5.7-5.7h11.3c3.2 0 5.7 2.4 5.7 5.7v11.3c.1 3.1-2.4 5.7-5.6 5.7H28.5c-3.1 0-5.7-2.5-5.7-5.6v-11.4zm0 45.6c0-3.2 2.4-5.7 5.7-5.7h11.3c3.2 0 5.7 2.4 5.7 5.7v11.3c.1 3.1-2.4 5.7-5.6 5.7H28.5c-3.1 0-5.7-2.5-5.7-5.6v-11.4zm0 45.6c0-3.2 2.4-5.7 5.7-5.7h11.3c3.2 0 5.7 2.4 5.7 5.7v11.3c.1 3.1-2.4 5.7-5.6 5.7H28.5c-3.1 0-5.7-2.5-5.7-5.6v-11.4zm22.8-22.8c0-3.2 2.4-5.7 5.7-5.7h11.3c3.2 0 5.7 2.4 5.7 5.7v11.3c.1 3.1-2.4 5.7-5.6 5.7H51.3c-3.1 0-5.7-2.5-5.7-5.6v-11.4zm0-45.6c0-3.2 2.4-5.7 5.7-5.7h11.3c3.2 0 5.7 2.4 5.7 5.7V245c.1 3.1-2.4 5.7-5.6 5.7H51.3c-3.1 0-5.7-2.5-5.7-5.6v-11.4zm0-45.7c0-3.2 2.4-5.7 5.7-5.7h11.3c3.2 0 5.7 2.4 5.7 5.7v11.3c.1 3.1-2.4 5.7-5.6 5.7H51.3c-3.1 0-5.7-2.5-5.7-5.6V188zm0-45.6c0-3.2 2.4-5.7 5.7-5.7h11.3c3.2 0 5.7 2.4 5.7 5.7v11.3c.1 3.1-2.4 5.7-5.6 5.7H51.3c-3.1 0-5.7-2.5-5.7-5.6v-.1-11.3zm0-45.6c0-3.2 2.4-5.7 5.7-5.7h11.3c3.2 0 5.7 2.4 5.7 5.7v11.3c.1 3.1-2.4 5.7-5.6 5.7H51.3c-3.1 0-5.7-2.5-5.7-5.6v-.1-11.3zm0-45.6c0-3.2 2.4-5.7 5.7-5.7h11.3c3.2 0 5.7 2.4 5.7 5.7v11.3c.1 3.1-2.4 5.7-5.6 5.7H51.3c-3.1 0-5.7-2.5-5.7-5.6V51.2z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Kazakhstan +77</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="white" d="M0 85.331h512v341.337H0z"></path><path d="M0 85.331h512v90.579H0z"></path><path fill="#496E2D" d="M0 336.089h512v90.568H0z"></path><path fill="#A2001D" d="M0 198.606h512v114.799H0z"></path><g fill="white"><path d="M323.265 139.803l-25.583-11.809L256 222.376l-41.682-94.382-25.583 11.809 51.749 116.191-51.749 116.192 25.583 11.808L256 289.613l41.682 94.381 25.583-11.808-51.749-116.192z"></path><path d="M273.376 150.931C263.472 140.115 256 133.898 256 133.898s-7.472 6.216-17.376 17.032v210.127C248.528 371.873 256 378.091 256 378.091s7.472-6.216 17.376-17.033V150.931z"></path></g><g fill="#A2001D"><path d="M209.04 191.226v129.535c10.465 18.542 23.274 33.742 32.872 43.818V147.408c-9.599 10.076-22.408 25.275-32.872 43.818zM302.96 191.226c-10.465-18.543-23.274-33.742-32.872-43.818V364.58c9.599-10.077 22.407-25.276 32.872-43.818V191.226z"></path></g><path d="M302.96 191.226v129.535c10.594-18.774 18.784-40.973 18.784-64.767s-8.19-45.993-18.784-64.768zM209.04 191.226v129.535c-10.594-18.774-18.784-40.973-18.784-64.767s8.19-45.993 18.784-64.768z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Kenya +254</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 450 300"><path fill="#CE1126" d="M0 0h450v300H0V0z"></path><g fill="#FCD116"><circle cx="227.6" cy="161.2" r="56.2"></circle><path d="M254.1 73.4l-23.7 26 28.6 6.5zM202.6 73.6l-4.8 33.1 28.5-8zM296.9 100.3l-34.7 8.5 20.1 23.7zM158.6 98.5l15.5 32.7 20.2-22.7zM317.6 143.8l-34.4-9.9 5.6 29.5zM135.6 141.2l31.9 19.8 5.2-27.7z"></path></g><path fill="#003F87" d="M0 175h450v125H0V175z"></path><path fill="white" d="M0 267c15 0 30 13 45 13s30-13 45-13 30 13 45 13 30-13 45-13 30 13 45 13 30-13 45-13 30 13 45 13 30-13 45-13 30 13 45 13 30-13 45-13v-21c-15 0-30 13-45 13s-30-13-45-13-30 13-45 13-30-13-45-13-30 13-45 13-30-13-45-13-30 13-45 13-30-13-45-13-30 13-45 13-30-13-45-13v21zm0-43c15 0 30 13 45 13s30-13 45-13 30 13 45 13 30-13 45-13 30 13 45 13 30-13 45-13 30 13 45 13 30-13 45-13 30 13 45 13 30-13 45-13v-21c-15 0-30 13-45 13s-30-13-45-13-30 13-45 13-30-13-45-13-30 13-45 13-30-13-45-13-30 13-45 13-30-13-45-13-30 13-45 13-30-13-45-13v21zm0-43c15 0 30 13 45 13s30-13 45-13 30 13 45 13 30-13 45-13 30 13 45 13 30-13 45-13 30 13 45 13 30-13 45-13 30 13 45 13 30-13 45-13v-21c-15 0-30 13-45 13s-30-13-45-13-30 13-45 13-30-13-45-13-30 13-45 13-30-13-45-13-30 13-45 13-30-13-45-13-30 13-45 13-30-13-45-13v21z"></path><path fill-rule="evenodd" clip-rule="evenodd" fill="#FCD116" d="M183.2 48.3l-1.1-5.3 22.4-3.7s-30.1-7.1-40-10.7c-14.3-5.1-16.3-12.1-16.3-12.1s44.7 11 64.8 11c4.3 0 12.8 10.7 12.8 10.7s14.8-14.9 21.9-15.4c32.1-2.3 66.6-6.4 66.6-6.4s-10 6.7-16 8.5c-16.2 4.9-50.6 11.7-50.6 11.7l-4.8 7.5H277l-14.4 4.3 7.4 6.9s-7.8-4.1-18.1-2.1c-7.1 1.3-15.4 6-22.9 8-18.7 4.8-29.9-12.8-29.9-12.8l-15.9-.1z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Kiribati +686</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#91DC5A" d="M0 85.331h512v341.337H0z"></path><path fill="white" d="M0 85.331h512v341.337H0z"></path><g fill="#0052B4"><path d="M0 85.331h512v57.188H0zM0 369.48h512v57.177H0z"></path></g><path fill="#D80027" d="M0 165.215h512v181.582H0z"></path><circle fill="white" cx="190.33" cy="255.994" r="65.668"></circle><path fill="#D80027" d="M190.332 190.332l14.734 45.346h47.757l-38.65 28.028 14.849 45.481-38.69-28.16-38.631 28.107 14.79-45.428-38.616-28.028h47.722z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Korea, Democratic People's Republic of Korea +850</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 600"><path fill="white" d="M0 0h900v600H0z"></path><g transform="rotate(-56.31)"><g stroke="black" stroke-width="25"><path d="M-75 228.3H75m-150 37.5H75m-150 37.5H75M-75 778.3H75m-150 37.5H75m-150 37.5H75"></path></g><path stroke="white" stroke-width="12.5" d="M0 753.3v125"></path><circle fill="#ca163a" cy="540.8" r="150"></circle><path fill="#0e4896" d="M0 390.8c-41.4 0-75 33.6-75 75s33.6 75 75 75 75 33.6 75 75-33.6 75-75 75c-82.8 0-150-67.2-150-150s67.2-150 150-150z"></path></g><g stroke="black" stroke-width="25"><path d="M231.56 535.73l-83.205-124.808M262.76 514.928l-83.205-124.807m114.407 104.006l-83.205-124.808M689.187 230.644l-83.205-124.807M720.39 209.843L637.184 85.036m114.407 104.006L668.386 64.234"></path></g><path stroke="white" stroke-width="12.5" d="M205.6 462.897l31.202-20.8m389.981-259.989l36.444-24.296m31.202-20.801l31.202-20.801"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Korea, Republic of South Korea +82</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 341.33"><path fill="#0052B4" d="M0 0h512v341.34H0z"></path><g fill="white"><path d="M220.72 42.63l7.95 16.11 17.77 2.58-12.86 12.54 3.04 17.7-15.9-8.36-15.9 8.36 3.03-17.7-12.86-12.54 17.78-2.58zM291.28 42.57l7.95 16.1 17.78 2.59-12.86 12.53 3.03 17.71-15.9-8.36-15.9 8.36 3.04-17.71-12.86-12.53 17.77-2.59zM353.36 53.93l7.95 16.11 17.77 2.58-12.86 12.54 3.04 17.7-15.9-8.35-15.9 8.35 3.04-17.7-12.87-12.54 17.78-2.58zM416.37 72.23l7.95 16.11 17.77 2.59-12.86 12.53 3.04 17.71-15.9-8.36-15.9 8.36 3.03-17.71-12.86-12.53 17.78-2.59zM158.64 53.93l7.95 16.11 17.78 2.58-12.87 12.54 3.04 17.7-15.9-8.35-15.9 8.35 3.04-17.7-12.86-12.54 17.77-2.58zM95.63 72.23l7.95 16.11 17.78 2.59-12.86 12.53 3.03 17.71-15.9-8.36-15.9 8.36 3.04-17.71-12.86-12.53 17.77-2.59z"></path></g><path fill="#FFDA44" d="M217.53 259.33l-27.22-13.61-27.22-54.43h27.22l27.22-27.22 13.61-27.22 27.22-13.61 13.61 13.61 27.22 13.61v13.61l13.61 13.61 40.83 27.22L340 245.73l-40.83 40.83-13.61-27.22-40.83 27.22v27.22l-13.61-13.61-13.59-40.84z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Kosovo +383</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 342"><g fill="#D80027"><path d="M0 0h513v342H0z"></path><circle cx="256" cy="170.7" r="170.7"></circle></g><path fill="#FFDA44" d="M382.4 170.7L330.8 195l27.5 50-56.1-10.7-7.1 56.6-39.1-41.7-39.1 41.7-7.1-56.6-56.1 10.7 27.5-50-51.6-24.3 51.6-24.3-27.5-50.1 56.1 10.8 7.1-56.7L256 92.1l39.1-41.7 7.1 56.7 56.1-10.8-27.5 50.1z"></path><circle fill="#D80027" cx="257.4" cy="170.7" r="71.6"></circle><g fill="#FFDA44"><path d="M214.2 170.7c-2.1 0-4.1.1-6.2.3.1 12 4.4 22.9 11.6 31.5 3.8-10.3 9.5-19.6 16.7-27.7-6.9-2.7-14.3-4.1-22.1-4.1zM240.8 217.2c5.2 1.9 10.8 2.9 16.6 2.9 5.8 0 11.4-1 16.6-2.9-2.8-11.1-8.7-21-16.6-28.8-7.9 7.8-13.8 17.7-16.6 28.8zM300.2 146c-8.5-14.8-24.5-24.7-42.8-24.7-18.3 0-34.2 9.9-42.8 24.7 15.6.1 30.2 4.3 42.8 11.6 12.6-7.3 27.2-11.6 42.8-11.6zM278.5 174.8c7.2 8 12.9 17.4 16.7 27.7 7.2-8.5 11.5-19.5 11.6-31.5-2-.2-4.1-.3-6.2-.3-7.7 0-15.2 1.4-22.1 4.1z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Kyrgyzstan +996</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342"><path fill="#0052B4" d="M0 0h513v342H0z"></path><g fill="#D80027"><path d="M0 .1h513v90.7H0zM0 251.3h513V342H0z"></path></g><circle fill="white" cx="256.5" cy="171" r="65.9"></circle></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Laos +856</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342"><path fill="white" d="M0 0h513v342H0z"></path><g fill="#A2001D"><path class="prefix__st1" d="M0 0h513v127.6H0zM0 214.4h513V342H0z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Latvia +371</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342"><path fill="white" d="M0 0h513v342H0z"></path><g fill="#D80027"><path d="M0 .2h513v90.7H0zM.5 251.3H513V342H.5z"></path></g><path fill="#6DA544" d="M290.3 193.5L256 130.7l-34.3 62.8h25.7v17.2h17.2v-17.2z"></path><path fill="#14AF5A" d="M241.3 213.1c4.4-4.4 4.4-11.6-.1-16l4.7 4.7c-5.2-4.7-12.2-6.6-19.1-5.3l-23.5 5.9c-6.1 1.5-6.8-.4-1.8-4.2l27.1-20.3c5.1-3.8 4.2-6.9-2.3-6.9h-11c-6.4 0-7-2.3-1.5-5.1l25.3-12.7c5.6-2.8 5.1-5.1-1.5-5.1h-11c-6.4 0-7.4-3.1-2.3-6.9l27.1-20.3c5.6-3.8 12.9-3.8 18.5 0l27.1 20.3c5.1 3.8 4.2 6.9-2.3 6.9h-11c-6.4 0-7 2.3-1.5 5.1l25.3 12.7c5.6 2.8 5.1 5.1-1.5 5.1h-11c-6.4 0-7.4 3.1-2.3 6.9l27.1 20.3c5.1 3.8 4.4 5.7-1.8 4.2l-23.5-5.9c-6.8-1.3-13.9.6-19.1 5.3l4.7-4.7c-4.4 4.4-4.5 11.5-.1 16l6.8 6.8c4.4 4.4 3.1 8-3.3 8h-45.8c-6.2 0-7.7-3.6-3.3-8 .1.1 6.9-6.8 6.9-6.8z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Lebanon +961</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342"><path fill="white" d="M0 0h513v342H0z"></path><path fill="#0052B4" d="M0 0h513v114H0z"></path><path fill="#6DA544" d="M0 227.6h513v114H0z"></path><path d="M245.2 171l7.7-23.1c2-5.9 5.1-6 7.1 0l7.7 23.1 19.4 29.1c1.7 2.6 1.3 6.3-1.2 8 0 0-6.9 8-29.5 8s-29.5-8-29.5-8c-2.4-2-2.9-5.4-1.2-8l19.5-29.1z"></path><path d="M256.5 171c-12.5 0-22.6-10.1-22.6-22.6 0-12.5 10.1-22.6 22.6-22.6s22.6 10.1 22.6 22.6c0 12.5-10.2 22.6-22.6 22.6zm0 0c6.2 0 11.3-16.3 11.3-22.6 0-6.2-5.1-11.3-11.3-11.3-6.2 0-11.3 5.1-11.3 11.3 0 6.3 5 22.6 11.3 22.6z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Lesotho +266</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="white" d="M0 91.476h512v341.337H0z"></path><g fill="#D80027"><path d="M0 91.476h512v31.031H0zM0 153.539h512v31.031H0zM0 215.603h512v31.031H0zM0 277.666h512v31.031H0zM0 339.729h512v31.031H0zM0 401.793h512v31.031H0z"></path></g><path fill="#0052B4" d="M0 79.177h256v167.457H0z"></path><path fill="white" d="M127.999 118.382l11.05 34.01h35.764l-28.932 21.021 11.05 34.012-28.932-21.021-28.933 21.021 11.053-34.012-28.932-21.021h35.762z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Liberia +231</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path d="M0 85.337h512v341.326H0z"></path><path fill="#D80027" d="M0 85.337h512v113.775H0z"></path><path fill="#496E2D" d="M0 312.888h512v113.775H0z"></path><g fill="white"><path d="M281.424 236.026l8.962 12.35 14.513-4.706-8.975 12.339 8.961 12.349-14.509-4.724-8.976 12.34.01-15.258-14.51-4.725 14.514-4.706z"></path><path d="M256.965 286.868c-17.048 0-30.868-13.821-30.868-30.868s13.821-30.868 30.868-30.868a30.742 30.742 0 0114.684 3.71c-6.851-6.698-16.218-10.833-26.556-10.833-20.982 0-37.992 17.01-37.992 37.992s17.01 37.992 37.992 37.992c10.338 0 19.706-4.135 26.556-10.833a30.738 30.738 0 01-14.684 3.708z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Libya +218</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342"><path fill="#D80027" d="M0 0h513v342H0z"></path><path fill="#0052B4" d="M0 0h513v171H0z"></path><path fill="#FFDA44" d="M149.3 98.1c0-14-11.3-25.3-25.3-25.3-6.5 0-12.4 2.4-16.9 6.4V64.4h8.4V47.5h-8.4v-8.4H90.3v8.4h-8.4v16.9h8.4v14.9c-4.5-4-10.4-6.4-16.9-6.4-14 0-25.3 11.3-25.3 25.3 0 7.5 3.3 14.2 8.4 18.8v14.9h84.3V117c5.3-4.7 8.5-11.5 8.5-18.9z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Liechtenstein +423</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#6DA544" d="M0 85.337h512v341.326H0z"></path><path fill="#FFDA44" d="M0 85.337h512v113.775H0z"></path><path fill="#D80027" d="M0 312.888h512v113.775H0z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Lithuania +370</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="white" d="M0 85.337h512v341.326H0z"></path><path fill="#D80027" d="M0 85.337h512v113.775H0z"></path><path fill="#338AF3" d="M0 312.888h512v113.775H0z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Luxembourg +352</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#496E2D" d="M0 85.331h512v341.337H0z"></path><path fill="white" d="M285.682 248.878c-4.19 0-8.166.836-11.861 2.164 2.023-4.509 3.379-9.527 3.379-14.885 0-21.201-21.201-37.101-21.201-37.101s-21.201 15.901-21.201 37.101c0 5.357 1.356 10.375 3.379 14.885-3.693-1.328-7.671-2.164-11.861-2.164-21.201 0-37.101 21.201-37.101 21.201s15.901 21.201 37.101 21.201c12.429 0 23.031-7.286 29.682-13.315 6.65 6.03 17.251 13.315 29.682 13.315 21.201 0 37.101-21.201 37.101-21.201s-15.899-21.201-37.099-21.201z"></path><g fill="#FFDA44"><path d="M256 152.111l4.38 13.476h14.171l-11.464 8.332 4.376 13.476-11.463-8.33-11.463 8.33 4.376-13.476-11.464-8.332h14.171zM202.112 175.683l8.425 7.585 9.818-5.667-4.61 10.355 8.423 7.588-11.274-1.185-4.611 10.355-2.358-11.088-11.275-1.185 9.818-5.669zM162.662 215.132l11.09 2.358 5.668-9.818 1.186 11.274 11.089 2.358-10.357 4.61 1.186 11.274-7.587-8.423-10.357 4.61 5.669-9.818zM309.889 175.683l-8.425 7.585-9.818-5.667 4.611 10.355-8.425 7.588 11.275-1.185 4.61 10.355 2.359-11.088 11.275-1.185-9.818-5.669zM349.338 215.132l-11.089 2.358-5.669-9.818-1.186 11.274-11.088 2.358 10.357 4.61-1.185 11.274 7.586-8.423 10.357 4.61-5.669-9.818z"></path></g><g fill="white"><path d="M256 350.642c16.84 0 32.363-5.619 44.816-15.073h-89.63c12.451 9.454 27.974 15.073 44.814 15.073zM187.977 306.12a74.138 74.138 0 008.85 15.073h118.345a74.13 74.13 0 008.85-15.073H187.977z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Macau +853</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#6DA544" d="M512 426.666V85.329H0v341.337h512z"></path><path fill="#D80027" d="M512 85.331H0v170.666h512V85.331z"></path><path fill="white" d="M0 85.334h181.793v341.337H0z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Madagascar +261</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#D80027" d="M0 85.337h512v341.326H0z"></path><path d="M0 85.337h512v113.775H0z"></path><path fill="#496E2D" d="M0 312.888h512v113.775H0z"></path><path fill="#D80027" d="M307.01 166.957l-20.842-9.804 11.099-20.186-22.634 4.329-2.868-22.864L256 135.248l-15.764-16.816-2.869 22.864-22.633-4.329 11.099 20.186-20.843 9.804z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Malawi +265</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 341.3"><path fill="white" d="M0 0h512v341.3H0z"></path><g fill="#D80027"><path d="M0 42.7h512v42.7H0zM0 128h512v42.7H0zM0 213.3h512V256H0zM0 298.7h512v42.7H0z"></path></g><path fill="#0052B4" d="M0 0h256v170.7H0z"></path><g fill="#FFDA44"><path d="M141.1 134.8c-28 0-45.9-24.8-45.9-49.5 0-24.8 17.9-49.5 45.9-49.5 8.7 0 18.1 1 25.3 4.9-11.2-11-26.6-17.8-43.6-17.8-34.4 0-62.4 27.9-62.4 62.4s27.9 62.4 62.4 62.4c17 0 32.3-6.8 43.6-17.8-7.1 3.9-16.5 4.9-25.3 4.9z"></path><path d="M171 49.7l9 18.8 20.3-4.7-9.1 18.8 16.4 12.9-20.4 4.6.1 20.9-16.3-13.1-16.2 13.1v-20.9l-20.3-4.6 16.3-12.9-9.1-18.8 20.3 4.7z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Malaysia +60</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#D80027" d="M0 85.331h512v341.333H0z"></path><path fill="#6DA544" d="M144.696 174.375h222.609v163.25H144.696z"></path><path fill="white" d="M283.484 304.226c-26.637 0-48.232-21.594-48.232-48.232s21.594-48.232 48.232-48.232c8.306 0 16.12 2.1 22.943 5.797-10.703-10.467-25.341-16.927-41.494-16.927-32.784 0-59.362 26.577-59.362 59.362s26.578 59.362 59.362 59.362c16.154 0 30.791-6.461 41.494-16.927-6.822 3.698-14.636 5.797-22.943 5.797z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Maldives +960</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#FFDA44" d="M0 85.331h512v341.337H0z"></path><path fill="#6DA544" d="M0 85.331h170.663v341.337H0z"></path><path fill="#D80027" d="M341.337 85.331H512v341.337H341.337z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Mali +223</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="white" d="M0 85.331h512v341.326H0z"></path><path fill="#D80027" d="M256 85.331h256v341.337H256z"></path><path fill="#ACABB1" d="M208.231 138.671v-21.334h-21.332v21.334h-21.334v21.332h21.334v21.334h21.332v-21.334h21.334v-21.332z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Malta +356</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#0052B4" d="M0 85.337h512v341.326H0z"></path><g fill="white"><path d="M233.839 185.115l-20.844 9.803 11.1 20.187-22.633-4.33-2.868 22.864-15.765-16.816-15.766 16.816-2.867-22.864-22.634 4.33 11.1-20.187-20.843-9.803 20.843-9.805-11.1-20.185 22.633 4.328 2.869-22.864 15.765 16.816 15.765-16.816 2.868 22.864 22.634-4.328-11.1 20.186zM426.917 85.337L0 421.52v3.762L503.756 85.337z"></path></g><path fill="#FF9811" d="M512 85.337h-8.244L0 425.282v1.381h3.723L512 136.998z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Marshall Islands +692</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#0052B4" d="M0 85.331h512v341.337H0z"></path><g fill="white"><path d="M512 233.734v44.521H278.261v148.402h-44.522V278.255H0v-44.521h233.739V85.331h44.522v148.403z"></path><path d="M386.607 175.885a4.119 4.119 0 014.115-4.114h8.816c13.936 0 25.274-11.337 25.274-25.273 0-13.935-11.337-25.273-25.274-25.273h-8.372c-2.733-2.052-6.399-3.318-10.443-3.318-8.436 0-15.273 5.471-15.273 12.219 0 6.683 6.707 12.104 15.029 12.209l-.003.049h19.062c2.27 0 4.115 1.845 4.115 4.115s-1.845 4.114-4.115 4.114h-8.816c-13.936 0-25.273 11.337-25.273 25.273 0 13.935 11.336 25.273 25.273 25.273h34.09V180h-34.09a4.12 4.12 0 01-4.115-4.115zM108.346 175.885a4.119 4.119 0 014.115-4.114h8.816c13.936 0 25.274-11.337 25.274-25.273 0-13.935-11.337-25.273-25.274-25.273h-8.372c-2.733-2.052-6.399-3.318-10.443-3.318-8.436 0-15.273 5.471-15.273 12.219 0 6.683 6.707 12.104 15.029 12.209l-.003.049h19.062c2.27 0 4.115 1.845 4.115 4.115s-1.845 4.114-4.115 4.114h-8.816c-13.936 0-25.273 11.337-25.273 25.273 0 13.935 11.336 25.273 25.273 25.273h34.09V180h-34.09a4.12 4.12 0 01-4.115-4.115zM386.607 368.809a4.119 4.119 0 014.115-4.114h8.816c13.936 0 25.274-11.337 25.274-25.273 0-13.935-11.337-25.273-25.274-25.273h-8.372c-2.733-2.052-6.399-3.318-10.443-3.318-8.436 0-15.273 5.471-15.273 12.219 0 6.683 6.707 12.104 15.029 12.209l-.003.049h19.062c2.27 0 4.115 1.845 4.115 4.115s-1.845 4.114-4.115 4.114h-8.816c-13.936 0-25.273 11.337-25.273 25.273 0 13.935 11.336 25.273 25.273 25.273h34.09v-21.159h-34.09a4.119 4.119 0 01-4.115-4.115zM108.346 368.809a4.119 4.119 0 014.115-4.114h8.816c13.936 0 25.274-11.337 25.274-25.273 0-13.935-11.337-25.273-25.274-25.273h-8.372c-2.733-2.052-6.399-3.318-10.443-3.318-8.436 0-15.273 5.471-15.273 12.219 0 6.683 6.707 12.104 15.029 12.209l-.003.049h19.062c2.27 0 4.115 1.845 4.115 4.115s-1.845 4.114-4.115 4.114h-8.816c-13.936 0-25.273 11.337-25.273 25.273 0 13.935 11.336 25.273 25.273 25.273h34.09v-21.159h-34.09a4.119 4.119 0 01-4.115-4.115z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Martinique +596</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#496E2D" d="M0 85.331h512v341.337H0z"></path><g fill="#FFDA44"><path d="M256 298.851c-45.956 0-84.348-32.298-93.767-75.429A96.288 96.288 0 00160 243.994c0 53.02 42.979 96 96 96s96-42.98 96-96c0-7.066-.785-13.942-2.233-20.572-9.419 43.131-47.811 75.429-93.767 75.429z"></path><path d="M255.999 171.994l8.935 27.502h28.918l-23.394 16.996 8.936 27.503-23.395-16.998-23.394 16.998 8.937-27.503-23.394-16.996h28.915z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Mauritania +222</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#FFDA44" d="M0 85.331h512v341.326H0z"></path><path fill="#D80027" d="M0 85.331h512v85.337H0z"></path><path fill="#0052B4" d="M0 170.657h512v85.337H0z"></path><path fill="#6DA544" d="M0 341.331h512v85.337H0z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Mauritius +230</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 60"><path fill="white" d="M0 0h90v60H0z"></path><path stroke="#7f7f7f" stroke-width=".25" fill="#ABABAB" d="M12.8 38.5s4 1.6 1.2-.5c-2.4-1.7-5 2.4-5 5.1s1.2 7 7.5 7c7.6 0 11.4-5.7 11.4-11.4 0-4.8-3.7-13.5-6.5-14.6-3.1-1.2-6.7-3.5-6.8-5 0-.5 1.4-.1 3.3.9 3.1 1.7 6.6 2.5 6.6 1.4s-2.9-3.1-4-4.6c-1.2-1.6-.9-5.5-3-5.5-7.6 0-9.9 7.7-7 11.7 1.9 2.6-4.3 1-4.3 1s0 5.3 3.2 7.3c3 1.8 4.8 3.9 4.8 3.9s-.2-4.6.5-3.9c.6.7 11.1 4.5 10.3 12-.3 3-4.5 5.4-8.5 5.2-4-.2-6.8-2.4-6.4-5.4.2-4.2 2.7-4.6 2.7-4.6zM77.2 38.5s-4 1.6-1.2-.5c2.4-1.8 5.1 2.3 5.1 5.1s-1.2 7-7.5 7c-7.6 0-11.4-5.7-11.4-11.4 0-4.8 3.7-13.5 6.5-14.6 3.1-1.2 6.7-3.5 6.8-5 0-.5-1.4-.1-3.3.9-3.1 1.7-6.6 2.5-6.6 1.4s2.9-3.1 4-4.6c1.2-1.6.9-5.5 3-5.5 7.6 0 9.9 7.7 7 11.7-1.9 2.6 4.3 1 4.3 1s0 5.3-3.2 7.3c-3 1.8-4.8 3.9-4.8 3.9s.2-4.6-.5-3.9c-.6.7-11.1 4.5-10.3 12 .3 3 4.5 5.4 8.5 5.2 4-.2 6.8-2.4 6.4-5.4-.3-4.2-2.8-4.6-2.8-4.6z"></path><path fill="#DE393A" d="M31 28.8v14c0 1.9 2.1 1.6 2.1 1.6h9.3c1.2 0 2.6 2.3 2.6 2.3s1.4-2.3 2.5-2.3h9.6s2 .2 2-1.8V28.7H31z"></path><path fill="#3951A3" d="M31 13.1h28v15.7H31z"></path><path fill="white" d="M50.1 16.5c-.4 2.4-2.5 4.2-5.1 4.2-2.5 0-4.6-1.8-5.1-4.2-.5.9-.8 1.9-.8 3 0 3.3 2.6 5.9 5.9 5.9 3.3 0 5.9-2.6 5.9-5.9 0-1.1-.3-2.1-.8-3z"></path><circle fill="#FEE05F" cx="39.1" cy="36.5" r="3"></circle><circle fill="#FEE05F" cx="50.9" cy="36.5" r="3"></circle></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Mayotte +262</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#D80027" d="M341.334 85.33H0v341.332h512V85.33z"></path><path fill="#6DA544" d="M0 85.333h170.663V426.67H0z"></path><path fill="white" d="M170.663 85.333h170.663V426.67H170.663z"></path><path fill="#6DA544" d="M208 255.996c0 26.509 21.491 48 48 48s48-21.491 48-48v-16h-96v16z"></path><path fill="#FF9811" d="M320 223.996h-48c0-8.836-7.164-16-16-16s-16 7.164-16 16h-48c0 8.836 7.697 16 16.533 16H208c0 8.836 7.164 16 16 16 0 8.836 7.164 16 16 16h32c8.836 0 16-7.164 16-16 8.836 0 16-7.164 16-16h-.533c8.836 0 16.533-7.163 16.533-16z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Mexico +52</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 341.3"><path fill="#338AF3" d="M0 0h512v341.3H0z"></path><g fill="white"><path d="M256 37.9l10.1 31.2H299l-26.6 19.3 10.2 31.2-26.6-19.3-26.6 19.3 10.2-31.2L213 69.1h32.9zM123.2 170.7l31.2-10.2v-32.8l19.3 26.6 31.2-10.2-19.3 26.6 19.3 26.5-31.2-10.1-19.3 26.5v-32.8zM256 303.5l-10.1-31.2H213l26.6-19.3-10.2-31.3L256 241l26.6-19.3-10.2 31.3 26.6 19.3h-32.9zM388.8 170.7l-31.2 10.1v32.8l-19.3-26.5-31.2 10.1 19.3-26.5-19.3-26.6 31.2 10.2 19.3-26.6v32.8z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Micronesia, Federated States of Micronesia +691</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342"><path fill="#FFDA44" d="M0 0h513v342H0z"></path><path fill="#D80027" d="M342 0h171v342H342z"></path><path fill="#0052B4" d="M0 0h171v342H0z"></path><path fill="#AF7F59" d="M206.2 129.1h33.2L256 79.3l16.6 49.8h33.2v99.6L256 262l-49.8-33.2v-99.7zm33.2 33.3v49.8h33.2v-49.8h-33.2z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Moldova +373</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="white" d="M0 85.34h512v341.326H0z"></path><path fill="#D80027" d="M512 85.334v166.69L0 256.175V85.334z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Monaco +377</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#0052B4" d="M0 85.331h512v341.326H0z"></path><g fill="#A2001D"><path d="M330.207 85.331H512v341.337H330.207zM0 85.331h181.793v341.337H0z"></path></g><g fill="#FFDA44"><path d="M113.163 267.125h14.84v59.359h-14.84zM53.793 267.125h14.84v59.359h-14.84z"></path><circle cx="90.902" cy="289.386" r="14.84"></circle><circle cx="90.902" cy="237.44" r="7.421"></circle><path d="M76.054 311.647h29.682v14.84H76.054zM76.054 252.288h29.682v14.84H76.054zM90.897 185.502l5.255 16.173h17.006l-13.757 9.996 5.252 16.173-13.756-9.996-13.756 9.996 5.251-16.173-13.756-9.996h17.005z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Mongolia +976</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#FFDA44" d="M0 85.337h512v341.326H0z"></path><path fill="#A2001D" d="M0 115.011h512v281.978H0z"></path><g fill="#FFDA44"><path d="M218.899 211.478h74.202v-29.681l-14.84 7.42L256 166.957l-22.261 22.26-14.84-7.42zM322.783 256h-37.088a17 17 0 002.3-8.543c0-9.458-7.668-17.124-17.124-17.124-6.534 0-12.209 3.661-15.096 9.041-2.887-5.38-8.562-9.041-15.096-9.041-9.456 0-17.124 7.666-17.124 17.124 0 3.114.846 6.026 2.3 8.543h-36.636c0 11.349 9.885 20.549 21.232 20.549h-.685c0 9.31 6.192 17.168 14.68 19.694l-16.678 16.678 15.741 15.741 22.329-22.329c.875.321 1.78.577 2.714.752l-13.492 30.464c6.466 2.629 13.531 4.088 20.941 4.088s14.475-1.46 20.941-4.088l-13.492-30.464a17.108 17.108 0 002.714-.752l22.329 22.329 15.741-15.741-16.678-16.678c8.488-2.526 14.68-10.385 14.68-19.694h-.685c11.347 0 21.232-9.2 21.232-20.549z"></path></g><path fill="#6DA544" d="M256 267.13l-24.116 11.131v22.261L256 315.362l24.116-14.84v-22.261z"></path><path fill="#0052B4" d="M231.88 256h48.228v29.682H231.88z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Montenegro +382</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#0052B4" d="M0 85.333h512V426.67H0z"></path><path fill="#338AF3" d="M334.222 191.996v78.221c0 38.103 49.777 49.779 49.777 49.779s49.778-11.675 49.778-49.779v-78.221h-99.555z"></path><path fill="#A2001D" d="M334.222 270.217c0 38.103 49.777 49.779 49.777 49.779s49.778-11.675 49.778-49.779h-99.555z"></path><path d="M405.334 227.552H391.11v-14.223h-14.222v14.223h-14.222v14.223h14.222v42.665h14.222v-42.665h14.224z"></path><path fill="white" d="M256 85.333v30.553l-45.167 25.099H256v59.359h-59.103L256 233.179v22.817h-26.68l-73.494-40.826v40.826h-55.652v-48.573l-87.43 48.573H0v-30.554l45.167-25.098H0v-59.359h59.103L0 108.139V85.333h26.68l73.494 40.825V85.333h55.652v48.572l87.43-48.572z"></path><path fill="#D80027" d="M144 85.33h-32v69.332H0v32h112v69.334h32v-69.334h112v-32H144z"></path><path fill="#0052B4" d="M155.826 200.344L256 255.996v-15.737l-71.847-39.915z"></path><path fill="white" d="M155.826 200.344L256 255.996v-15.737l-71.847-39.915z"></path><g fill="#D80027"><path d="M155.826 200.344L256 255.996v-15.737l-71.847-39.915zM71.846 200.344L0 240.259v15.737l100.174-55.652z"></path></g><path fill="#0052B4" d="M100.174 140.982L0 85.33v15.737l71.847 39.915z"></path><path fill="white" d="M100.174 140.982L0 85.33v15.737l71.847 39.915z"></path><g fill="#D80027"><path d="M100.174 140.982L0 85.33v15.737l71.847 39.915zM184.154 140.982L256 101.067V85.33l-100.174 55.652z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Montserrat +1664</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#D80027" d="M0 85.337v341.326h512V85.337z"></path><path fill="#20661b" d="M352 226.484h-73.337L256 156.738l-22.663 69.748H160l59.331 43.107-22.663 69.749L256 296.232l59.332 43.107-22.663-69.749L352 226.484zm-116.063 37.711l7.663-23.585h24.8l7.663 23.585v.001L256 278.772l-20.063-14.577zm27.873-37.711h-15.619L256 202.447l7.81 24.037zm24.269 28.982l-4.827-14.856h25.274l-20.447 14.856zm-59.331-14.856l-4.827 14.856-20.447-14.856h25.274zm-5.211 61.748l7.81-24.036 12.636 9.181-20.446 14.855zm44.479-14.856l12.636-9.181 7.81 24.036-20.446-14.855z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Morocco +212</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="white" d="M0 85.337h512v341.326H0z"></path><path fill="#FFDA44" d="M0 322.783h512v103.88H0z"></path><path fill="#496E2D" d="M0 85.337h512v104.515H0z"></path><path d="M0 210.877h512v89.656H0z"></path><path fill="#A2001D" d="M256 256.006L0 426.668V85.331z"></path><path fill="#FFDA44" d="M83.477 195.132l15.107 46.498h48.894l-39.554 28.739 15.107 46.499-39.554-28.738-39.555 28.738 15.11-46.499-39.554-28.739H68.37z"></path><path fill="white" d="M39.268 256h88.42v40.578h-88.42z"></path><path d="M144.443 209.479l-14.347-14.347-46.618 46.618-46.617-46.618-14.347 14.347 46.658 46.577-46.658 46.658 14.347 14.154 46.617-46.534 46.618 46.534 14.347-14.154-46.659-46.658z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Mozambique +258</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#6DA544" d="M0 85.337h512v341.326H0z"></path><path fill="#FFDA44" d="M0 85.337h512v113.775H0z"></path><path fill="#D80027" d="M0 312.888h512v113.775H0z"></path><path fill="white" d="M384 227.261h-97.783L256 134.265l-30.217 92.997H128l79.108 57.475-30.217 92.998L256 320.925l79.108 56.81-30.217-92.998L384 227.261z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Myanmar +95</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#496E2D" d="M0 85.337h512v341.326H0z"></path><path fill="#0052B4" d="M0 426.663V85.337h512"></path><path fill="white" d="M512 152.222V85.337H411.67L0 359.778v66.885h100.33z"></path><path fill="#A2001D" d="M512 85.337v40.125L60.193 426.663H0v-40.125L451.807 85.337z"></path><path fill="#FFDA44" d="M187.737 189.212l-22.741 10.696 12.11 22.024-24.693-4.724-3.129 24.945-17.199-18.347-17.2 18.347-3.129-24.945-24.693 4.723 12.109-22.023-22.739-10.696 22.74-10.697-12.11-22.022 24.693 4.722 3.13-24.944 17.199 18.347 17.2-18.347 3.128 24.944 24.693-4.722-12.108 22.024z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Namibia +264</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#0052B4" d="M0 85.337h512v341.326H0z"></path><path fill="#FFDA44" d="M0 239.994h512v32H0z"></path><path fill="white" d="M174.802 341.329l-19.124 8.996 10.184 18.521-20.767-3.973-2.631 20.978L128 370.422l-14.465 15.429-2.63-20.978-20.767 3.973 10.183-18.521-19.123-8.996 19.124-8.995-10.184-18.52 20.766 3.971 2.632-20.978L128 312.236l14.465-15.429 2.63 20.978 20.767-3.971-10.183 18.521z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Nauru +674</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="white" d="M0 85.337h512v341.326H0z"></path><path fill="#0052B4" d="M0 426.663V85.337l280.419 174.75H87.61l183.576 166.576z"></path><path fill="#D80027" d="M244.769 249.888L10.199 103.71v312.754h234.57L61.193 249.888z"></path><g fill="white"><path d="M98.003 324.433l-14.589-6.863 7.77-14.13-15.844 3.03-2.008-16.005-11.035 11.772-11.036-11.772-2.008 16.005-15.843-3.031 7.77 14.131-14.591 6.863 14.591 6.862-7.77 14.13 15.844-3.029 2.007 16.004 11.036-11.772L73.332 358.4l2.008-16.004 15.843 3.03-7.769-14.13zM88.268 191.662l-10.612-4.991 5.651-10.278-11.523 2.205-1.461-11.641-8.026 8.561-8.026-8.561-1.46 11.641-11.525-2.205 5.652 10.278-10.613 4.991 25.972 5.194z"></path><path d="M93.462 191.662c0 17.212-13.953 31.165-31.165 31.165s-31.165-13.953-31.165-31.165"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Nepal +977</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="white" d="M0 85.337h512v341.326H0z"></path><path fill="#A2001D" d="M0 85.337h512v113.775H0z"></path><path fill="#0052B4" d="M0 312.888h512v113.775H0z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Netherlands +31</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 426.7"><path fill="#009543" d="M0 293h640v133.7H0V293z"></path><path fill="#ED4135" d="M0 132h640v161.3H0V132z"></path><path fill="#0035AD" d="M0 0h640v133.3H0V0z"></path><circle fill="#FAE600" stroke="black" stroke-width="5.3" cx="240" cy="213.3" r="157.3"></circle><path d="M307.9 354.5l-31.8 12-36.1 4.2-37.8-2.4-35.9-15.5s28.6-29.3 40.7-33.5c8.6-3 22.4-3.7 22.4-3.7V122l-.3-66H246l-.5 67.5v191.7s15.3 1.2 22.1 4.1c11.3 4.9 40.3 35.2 40.3 35.2z"></path><path d="M212.727 102.375l42.955-21.418 5.577 11.187-42.955 21.417z"></path><ellipse cx="237.8" cy="280.5" rx="16.8" ry="26.5"></ellipse><circle cx="237.4" cy="143.4" r="20.9"></circle><ellipse cx="238.4" cy="211.1" rx="19.9" ry="12.1"></ellipse><path d="M213.8 177h47v10h-47zM213.8 234h47v10h-47z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">New Caledonia +687</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="white" d="M0 85.337h512v341.326H0z"></path><g fill="#338AF3"><path d="M0 85.337h512v113.775H0zM0 312.888h512v113.775H0z"></path></g><path fill="#FFDA44" d="M256 214.447c-22.949 0-41.553 18.603-41.553 41.553S233.05 297.553 256 297.553c22.949 0 41.553-18.603 41.553-41.553S278.949 214.447 256 214.447zm0 65.298c-13.114 0-23.745-10.631-23.745-23.745s10.631-23.745 23.745-23.745 23.745 10.631 23.745 23.745-10.631 23.745-23.745 23.745z"></path><path fill="#0052B4" d="M276.563 261.936L256 256l-20.563 5.936-6.855 11.873h54.836z"></path><path fill="#338AF3" d="M256 226.32l-13.709 23.744L256 256l13.709-5.936z"></path><path fill="#6DA544" d="M235.437 261.936h41.126l-6.854-11.872h-27.418z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Nicaragua +505</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="white" d="M0 85.337h512v341.326H0z"></path><path fill="#FF9811" d="M0 85.337h512v113.775H0z"></path><path fill="#6DA544" d="M0 312.888h512v113.775H0z"></path><circle fill="#FF9811" cx="256" cy="256" r="32"></circle></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Niger +227</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="white" d="M0 85.331h512v341.337H0z"></path><g fill="#6DA544"><path d="M0 85.331h170.663v341.337H0zM341.337 85.331H512v341.337H341.337z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Nigeria +234</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#FFDA44" d="M0 85.334h512v341.337H0z"></path><path fill="white" d="M0 85.334h256v170.663H0z"></path><g fill="#D80027"><path d="M144 85.33h-32v69.333H0v32h112v69.334h32v-69.334h112v-32H144z"></path><path d="M0 85.329v15.083l57.377 38.251H80z"></path></g><g fill="#2E52B2"><path d="M0 107.951v30.712h46.069zM96 85.331v48.913L22.628 85.331z"></path></g><path fill="#D80027" d="M256 85.329v15.083l-57.377 38.251H176z"></path><g fill="#2E52B2"><path d="M256 107.951v30.712h-46.069zM160 85.331v48.913l73.372-48.913z"></path></g><path fill="#D80027" d="M0 85.329v15.083l57.377 38.251H80z"></path><g fill="#2E52B2"><path d="M0 107.951v30.712h46.069zM96 85.331v48.913L22.628 85.331z"></path></g><path fill="#D80027" d="M256 85.329v15.083l-57.377 38.251H176z"></path><g fill="#2E52B2"><path d="M256 107.951v30.712h-46.069zM160 85.331v48.913l73.372-48.913z"></path></g><path fill="#D80027" d="M0 255.997v-15.082l57.377-38.252H80z"></path><g fill="#2E52B2"><path d="M0 233.376v-30.713h46.069zM96 255.994v-48.912l-73.372 48.912z"></path></g><path fill="#D80027" d="M256 255.997v-15.082l-57.377-38.252H176z"></path><g fill="#2E52B2"><path d="M256 233.376v-30.713h-46.069zM160 255.994v-48.912l73.372 48.912z"></path><circle cx="128" cy="170.66" r="22.627"></circle></g><g fill="#FFDA44"><path d="M128 154.663l3.97 12.222h12.854l-10.398 7.556 3.971 12.222L128 179.109l-10.398 7.554 3.972-12.222-10.398-7.556h12.853zM128 219.803l2.364 7.278h7.653l-6.19 4.498 2.364 7.278-6.191-4.498-6.191 4.498 2.364-7.278-6.19-4.498h7.652zM128 102.469l2.364 7.278h7.653l-6.19 4.498 2.364 7.278-6.191-4.498-6.191 4.498 2.364-7.278-6.19-4.498h7.652zM197.931 161.136l2.365 7.277h7.653l-6.192 4.499 2.365 7.279-6.191-4.498-6.191 4.498 2.365-7.279-6.191-4.499h7.652zM58.069 161.136l2.364 7.277h7.653l-6.191 4.499 2.364 7.279-6.19-4.498-6.191 4.498 2.365-7.279-6.192-4.499h7.653z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Niue +683</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="white" d="M0 85.331h512v341.337H0z"></path><g fill="#6DA544"><path d="M0 85.331h170.663v341.337H0zM341.337 85.331H512v341.337H341.337zM304 311.995l-48-152.001-48 152.001h36v39.999h24v-39.999z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Norfolk Island +672</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#FFDA44" d="M0 85.333h512V426.67H0z"></path><g fill="#D80027"><path d="M383.875 426.662L256 252.286l26.827 174.376zM133.565 85.33L256 252.286 230.314 85.33zM229.171 426.662L256 252.286 128.124 426.662zM0 85.33V212.9l256 39.386L28.333 85.33zM0 426.662h18.212L256 252.286 0 291.67zM256 252.286L512 212.9V85.33h-28.331zM281.686 85.33L256 252.286 378.434 85.33zM512 426.662V291.671l-256-39.385 237.787 174.376z"></path><circle cx="256" cy="252.29" r="59.359"></circle></g><circle fill="#FFDA44" cx="256" cy="252.29" r="44.522"></circle></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">North Macedonia +389</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750 500"><path fill="#0071BC" d="M0 0h750v500H0V0z"></path><g fill="white" stroke="black" stroke-width="1.9"><circle cx="375" cy="245" r="225" fill="white"></circle><circle cx="375" cy="245" r="165" fill="#0071BC"></circle></g><g stroke="black"><path fill="#8C8A8C" stroke-width="1.9" d="M444.7 450c.7 11-7.8 20-18.8 20H323.6c-11 0-19.5-9-19-20l16.7-325c.6-11 10-20 21-20h61.4c11 0 20.5 9 21.2 20l19.8 325z"></path><path fill="white" stroke-width="2" stroke-linejoin="round" d="M373 114l30 93h97l-78 56 29 92-78-56-78 57 30-93-79-57h97l30-92z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Northern Mariana Islands +1670</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#D80027" d="M0 85.334h512v341.337H0z"></path><path fill="white" d="M512 295.883H202.195v130.783H122.435V295.883H0V216.111h122.435V85.329H202.195v130.782H512V277.329z"></path><path fill="#2E52B2" d="M512 234.666v42.663H183.652v149.337h-42.674V277.329H0v-42.663h140.978V85.329h42.674v149.337z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Norway +47</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><g fill="#D80027"><path d="M0 85.331h512v341.326H0z"></path><path d="M0 85.331h512v341.337H0z"></path></g><g fill="white"><path d="M189.746 160.439l-15.739-15.741-10.494 10.494-10.493-10.494-15.741 15.741 10.494 10.493-10.495 10.494 15.74 15.741 10.494-10.494 10.495 10.494 15.739-15.741-10.494-10.494zM211.478 85.331H512v111.315H211.478z"></path></g><path fill="#6DA544" d="M211.478 315.353H512v111.304H211.478z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Oman +968</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><g fill="white"><path d="M393.508 170.516l17.512 18.875 23.363-10.821-12.541 22.487 17.513 18.876-25.263-4.978-12.539 22.488-3.073-25.564-25.263-4.978 23.363-10.82z"></path><path d="M0 85.343h512v341.326H0z"></path></g><path fill="#496E2D" d="M128 85.331h384v341.337H128z"></path><g fill="white"><path d="M361.909 298.793c-31.037 22.426-74.378 15.446-96.804-15.592-22.427-31.038-15.446-74.379 15.593-96.804 9.677-6.992 20.55-11.125 31.613-12.563-21.283-3.183-43.777 1.613-62.598 15.211-38.2 27.602-46.792 80.944-19.191 119.145 27.601 38.199 80.944 46.792 119.145 19.189 18.82-13.598 30.436-33.448 34.096-54.655-4.839 10.05-12.176 19.076-21.854 26.069zM360.58 172.889l17.484 18.842 23.322-10.802-12.519 22.447 17.483 18.844-25.219-4.968-12.519 22.45-3.067-25.521-25.22-4.969 23.323-10.802z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Pakistan +92</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#338AF3" d="M0 85.331h512v341.337H0z"></path><circle fill="#FFDA44" cx="218.902" cy="255.994" r="74.207"></circle></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Palau +680</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="white" d="M0 85.337h512v341.326H0z"></path><path d="M0 85.337h512v113.775H0z"></path><path fill="#6DA544" d="M0 312.888h512v113.775H0z"></path><path fill="#D80027" d="M256 256.006L0 426.668V85.331z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Palestine +970</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path d="M0 85.333h512V426.67H0z"></path><path fill="#A2001D" d="M0 85.33h512v341.332"></path><g fill="white"><path d="M204.631 326.488l2.762 8.504h8.941l-7.233 5.255 2.763 8.502-7.233-5.254-7.233 5.254 2.762-8.502-7.233-5.255h8.94zM181.797 244.866l4.605 14.172h14.901l-12.056 8.757 4.605 14.172-12.055-8.759-12.055 8.759 4.606-14.172-12.056-8.757h14.901zM181.797 348.749l4.604 14.173h14.902l-12.057 8.757 4.606 14.173-12.055-8.759-12.055 8.759 4.604-14.173-12.054-8.757h14.899zM225.363 281.967l4.606 14.172h14.901l-12.056 8.758 4.605 14.172-12.056-8.759-12.054 8.759 4.606-14.172-12.056-8.758h14.901zM138.23 281.967l4.606 14.172h14.899l-12.054 8.758 4.603 14.172-12.054-8.759-12.055 8.759 4.605-14.172-12.055-8.758h14.9z"></path></g><path fill="#FFDA44" d="M376.526 204.163c-7.628-7.628-17.538-12.133-28.189-12.908l31.88-24.795c-12.698-12.698-29.714-18.431-46.319-17.218a44.31 44.31 0 00-11.396-19.511l-12.593 25.186a18.47 18.47 0 00-3.148-4.197c-7.245-7.245-18.991-7.244-26.234 0s-7.245 18.99 0 26.234a18.536 18.536 0 004.197 3.148l-25.186 12.593a44.303 44.303 0 0019.519 11.399c-1.217 16.606 4.511 33.619 17.209 46.317L324.12 214.6a11.053 11.053 0 017.807-3.202c2.973 0 5.768 1.158 7.87 3.26a11.055 11.055 0 013.26 7.87c0 2.974-1.158 5.768-3.26 7.87l10.494 10.494c4.905-4.905 7.607-11.428 7.607-18.364 0-5.675-1.81-11.071-5.153-15.534a29.492 29.492 0 0113.288 7.662c11.573 11.572 11.573 30.403 0 41.975l10.494 10.494c8.409-8.409 13.039-19.59 13.039-31.481-.001-11.892-4.632-23.072-13.04-31.481z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Papua New Guinea +675</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="white" d="M0 85.337h512v341.326H0z"></path><path fill="#D80027" d="M0 85.337h512v113.775H0z"></path><path fill="#0052B4" d="M0 312.888h512v113.775H0z"></path><path fill="#6DA544" d="M289.579 216.738l-12.592 12.592c5.37 5.372 8.693 12.792 8.693 20.988 0 16.392-13.289 29.68-29.68 29.68-16.392 0-29.68-13.289-29.68-29.68 0-8.195 3.322-15.616 8.693-20.988l-12.592-12.592c-8.594 8.594-13.91 20.466-13.91 33.579 0 26.228 21.261 47.489 47.489 47.489s47.489-21.261 47.489-47.489c0-13.112-5.316-24.985-13.91-33.579z"></path><path fill="#FFDA44" d="M256 232.51l4.421 13.605h14.304l-11.573 8.408 4.421 13.604L256 259.719l-11.573 8.408 4.421-13.604-11.573-8.408h14.304z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Paraguay +595</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="white" d="M0 85.331h512v341.326H0z"></path><g fill="#D80027"><path d="M0 85.331h170.663v341.337H0zM341.337 85.331H512v341.337H341.337z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Peru +51</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="white" d="M0 85.337h512v341.326H0z"></path><path fill="#0052B4" d="M512 85.337V256H256L0 85.337z"></path><path fill="#D80027" d="M512 256v170.663H0L256 256z"></path><g fill="#FFDA44"><path d="M161.908 256l-27.288-12.835 14.532-26.428-29.632 5.668-3.755-29.933-20.64 22.015-20.639-22.015-3.755 29.933-29.631-5.669 14.531 26.428L28.343 256l27.288 12.835L41.1 295.263l29.633-5.668 3.753 29.933 20.639-22.015 20.64 22.015 3.755-29.933 29.631 5.669-14.532-26.427zM21.789 117.607l9.081 12.696 14.879-4.714-9.268 12.56 9.081 12.694-14.809-4.932-9.268 12.559.117-15.608-14.809-4.934 14.88-4.712zM21.789 353.53l9.081 12.696 14.879-4.714-9.268 12.56 9.081 12.695-14.809-4.933-9.268 12.558.117-15.607-14.809-4.934 14.88-4.712zM210.395 235.569l-9.081 12.695-14.879-4.713 9.268 12.559-9.081 12.696 14.809-4.933 9.268 12.558-.117-15.607 14.809-4.934-14.88-4.713z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Philippines +63</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#0052B4" d="M0 85.333h512V426.67H0z"></path><path fill="#ACABB1" d="M400.696 219.822L384 225.387l-16.696-5.565-5.565-13.913 5.565-13.913h33.392l-5.566 13.913z"></path><path fill="#338AF3" d="M345.043 219.822v61.217c0 29.821 38.957 38.957 38.957 38.957s38.957-9.137 38.957-38.957v-61.217h-77.914z"></path><path fill="#6DA544" d="M348.555 295.541C358.131 313.927 384 319.996 384 319.996s25.869-6.069 35.445-24.455L384 236.518l-35.445 59.023z"></path><path fill="#FFDA44" d="M422.957 280.421L384 219.822l-38.957 60.599v.618c0 5.518 1.337 10.328 3.512 14.503L384 240.405l35.445 55.137c2.175-4.175 3.512-8.983 3.512-14.503v-.618z"></path><path fill="white" d="M256 85.333v30.553l-45.167 25.099H256v59.359h-59.103L256 233.179v22.817h-26.68l-73.494-40.826v40.826h-55.652v-48.573l-87.43 48.573H0v-30.554l45.167-25.098H0v-59.359h59.103L0 108.139V85.333h26.68l73.494 40.825V85.333h55.652v48.572l87.43-48.572z"></path><path fill="#D80027" d="M144 85.33h-32v69.332H0v32h112v69.334h32v-69.334h112v-32H144z"></path><path fill="#0052B4" d="M155.826 200.344L256 255.996v-15.737l-71.847-39.915z"></path><path fill="white" d="M155.826 200.344L256 255.996v-15.737l-71.847-39.915z"></path><g fill="#D80027"><path d="M155.826 200.344L256 255.996v-15.737l-71.847-39.915zM71.846 200.344L0 240.259v15.737l100.174-55.652z"></path></g><path fill="#0052B4" d="M100.174 140.982L0 85.33v15.737l71.847 39.915z"></path><path fill="white" d="M100.174 140.982L0 85.33v15.737l71.847 39.915z"></path><g fill="#D80027"><path d="M100.174 140.982L0 85.33v15.737l71.847 39.915zM184.154 140.982L256 101.067V85.33l-100.174 55.652z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Pitcairn +872</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><g fill="white"><path d="M0 85.337h512v341.326H0z"></path><path d="M0 85.337h512V256H0z"></path></g><path fill="#D80027" d="M0 256h512v170.663H0z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Poland +48</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#D80027" d="M0 85.337h512v341.326H0z"></path><path fill="#6DA544" d="M196.641 85.337v341.326H0V85.337z"></path><circle fill="#FFDA44" cx="196.641" cy="256" r="64"></circle><path fill="#D80027" d="M160.638 224v40.001c0 19.882 16.118 36 36 36s36-16.118 36-36V224h-72z"></path><path fill="white" d="M196.638 276c-6.617 0-12-5.383-12-12v-16h24.001v16c-.001 6.616-5.385 12-12.001 12z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Portugal +351</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="white" d="M0 85.337h512v341.326H0z"></path><g fill="#D80027"><path d="M0 85.337h512V153.6H0zM0 221.863h512v68.263H0zM0 358.4h512v68.263H0z"></path></g><path fill="#0052B4" d="M256 256.006L0 426.668V85.331z"></path><path fill="white" d="M83.477 195.132l15.107 46.498h48.894l-39.554 28.739 15.107 46.499-39.554-28.738-39.555 28.738 15.11-46.499-39.554-28.739H68.37z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Puerto Rico +1939</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#751A46" d="M2.216 86.076H512v339.848H2.216z"></path><path fill="white" d="M209.455 154.969l-50.236 25.267 50.236 25.257-50.236 25.267 50.236 25.257-50.236 25.266 50.236 25.257-50.236 25.268 50.236 25.257-50.236 25.267 50.236 25.268-36.45 18.33H0V86.07h172.939l36.516 18.364-50.236 25.267z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Qatar +974</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 26.666 640 426.666"><g fill-rule="evenodd" stroke-width="1pt"><path fill="white" d="M0 0h640v480H0z"></path><path fill="#00267f" d="M0 0h213.3v480H0z"></path><path fill="#f31830" d="M426.7 0H640v480H426.7z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Reunion +262</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#FFDA44" d="M0 85.331h512v341.326H0z"></path><path fill="#0052B4" d="M0 85.331h170.663v341.337H0z"></path><path fill="#D80027" d="M341.337 85.331H512v341.337H341.337z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Romania +40</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="white" d="M0 85.33v341.332h512V85.33z"></path><path fill="#0052B4" d="M0 85.333h512V426.67H0z"></path><path fill="white" d="M0 85.333h512v113.775H0z"></path><path fill="#D80027" d="M0 312.884h512v113.775H0z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Russia +7</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#338AF3" d="M0 85.331h512v341.337H0z"></path><path fill="#FFDA44" d="M0 255.994h512v81.619H0z"></path><path fill="#496E2D" d="M0 337.614h512v89.043H0z"></path><path fill="#FFDA44" d="M278.261 185.209l20.844 9.804-11.099 20.186 22.632-4.33 2.868 22.865 15.765-16.816 15.766 16.816 2.867-22.865 22.633 4.33-11.099-20.186 20.843-9.804-20.844-9.805 11.1-20.185-22.633 4.329-2.868-22.864-15.765 16.816-15.766-16.816-2.867 22.864-22.634-4.329 11.1 20.187z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Rwanda +250</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 341.33"><path fill="white" d="M0 0h512v341.33H0z"></path><path fill="#E6BC00" d="M157.31 199.76s-9.04 43.93-19.31 40.39c-10.62-3.54-17.53-18.76-17.53-18.76l-14.52 21.24s38.18 8.48 41.01 5.47c1.22-1.14 8.21-15.1 10.34-26.05v-22.29zm-56.13 60.57s-2.48 20.18-1.06 22.66c1.24 2.3 39.48 11.33 39.48 11.33s-24.96 16.46-29.74 20.54L91.8 284.94l-.71-24.61h10.09zM112.51 94.64s39.65 41.6 40.36 45.5c.71 3.72-4.25 3.19-4.25 3.19s-44.79-37.53-49.92-41.07c-5.31-3.55 13.81-7.62 13.81-7.62z"></path><path fill="#ADADAD" d="M99.41 104.73s16.99-.71 16.64-11.51c-.35-10.62-11.15-14.87-19.12-12.39-7.97 2.3-23.01 13.45-13.63 35.05 9.38 21.42 23.37 29.39 26.2 47.8 0 0-5.46 9.86-19.12.35-16.9-11.77-6.2-38.24-10.44-44.96-4.25-7.08-40.95-38.92-40.95-38.92s-30.24 39.37-18 74.92c16.95 49.21 51.74 31.98 64.61 36.76 0 0-42.13 61.96-49.57 67.09 0 0 24.08 8.32 47.8-18.76 0 0 5.84 9.74 7.08 20.18h10.27c4.78-26.2 51.51-64.26 49.92-82.32-1.77-21.25-49.21-49.39-51.69-73.29z"></path><path fill="#E6BC00" d="M359.17 201.27s8.96 42.43 19.23 38.89c10.62-3.54 17.53-18.76 17.53-18.76l14.52 21.24s-37 8.48-39.83 5.47c-1.21-1.14-9.32-13.79-11.52-24.66l.07-22.18zm56.05 59.06s2.48 20.18 1.06 22.66c-1.24 2.3-39.48 11.33-39.48 11.33s24.96 16.46 29.74 20.54l18.06-29.92.71-24.61h-10.09zM403.89 94.64s-39.65 41.6-40.36 45.5c-.71 3.72 4.25 3.19 4.25 3.19s44.79-37.53 49.92-41.07c5.14-3.55-13.81-7.62-13.81-7.62z"></path><path fill="#125ECC" d="M157.31 87.06H359.1v145.46c0 16.06-9.69 21.39-21.91 31.85l-45.92 39.41c-18.25 15.62-47.91 15.57-66.07 0l-46.01-39.43c-12.08-10.35-21.88-15.71-21.88-31.82V87.06z"></path><path fill="#FFE600" d="M200.55 147.71c-7.96 0-14.41-6.45-14.41-14.41s6.45-14.41 14.41-14.41 14.41 6.45 14.41 14.41-6.45 14.41-14.41 14.41zm57.65-3c-7.96 0-14.41-6.45-14.41-14.41s6.45-14.41 14.41-14.41 14.41 6.45 14.41 14.41-6.45 14.41-14.41 14.41zm57.65 3c-7.96 0-14.41-6.45-14.41-14.41s6.45-14.41 14.41-14.41 14.41 6.45 14.41 14.41-6.45 14.41-14.41 14.41zM214.96 274.43c-7.96 0-14.41-6.45-14.41-14.41s6.45-14.41 14.41-14.41 14.41 6.45 14.41 14.41c.01 7.96-6.45 14.41-14.41 14.41zm43.24 14.42c-7.96 0-14.41-6.45-14.41-14.41s6.45-14.41 14.41-14.41 14.41 6.45 14.41 14.41c0 7.95-6.45 14.41-14.41 14.41zm43.24-14.42c-7.96 0-14.41-6.45-14.41-14.41s6.45-14.41 14.41-14.41 14.41 6.45 14.41 14.41-6.45 14.41-14.41 14.41z"></path><path fill="#D60537" d="M157.31 175.36H359.1v57.65H157.31v-57.65z"></path><path fill="#EACE00" d="M142.9 43.82s57.65-14.41 115.31-14.41 115.31 14.41 115.31 14.41l-14.41 57.65s-50.45-14.41-100.89-14.41-100.89 14.41-100.89 14.41L142.9 43.82z"></path><path fill="#7A6920" d="M258.2 72.65c-7.96 0-14.41-6.45-14.41-14.41s6.45-14.41 14.41-14.41 14.41 6.45 14.41 14.41-6.45 14.41-14.41 14.41zm57.65 5c-7.96 0-14.41-6.45-14.41-14.41s6.45-14.41 14.41-14.41 14.41 6.45 14.41 14.41-6.45 14.41-14.41 14.41zm-115.3 0c-7.96 0-14.41-6.45-14.41-14.41s6.45-14.41 14.41-14.41 14.41 6.45 14.41 14.41-6.45 14.41-14.41 14.41z"></path><path fill="#ADADAD" d="M365.08 178.02c-1.59 18.06 45.14 56.12 49.92 82.32h10.27c1.24-10.44 7.08-20.18 7.08-20.18 23.72 27.09 47.8 18.76 47.8 18.76-7.44-5.13-49.57-67.09-49.57-67.09 12.88-4.78 47.67 12.45 64.61-36.76 12.24-35.55-18-74.92-18-74.92s-36.7 31.84-40.95 38.92c-4.25 6.73 6.46 33.2-10.44 44.96-13.66 9.51-19.12-.35-19.12-.35 2.83-18.41 16.82-26.38 26.2-47.8 9.38-21.6-5.66-32.75-13.63-35.05-7.97-2.48-18.76 1.77-19.12 12.39-.35 10.8 16.64 11.51 16.64 11.51-2.48 23.9-49.92 52.04-51.69 73.29z"></path><circle fill="white" cx="258.2" cy="204.19" r="16.93"></circle></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Saint Barthelemy +590</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 341.3"><path fill="#0052B4" d="M0 0h512v341.3H0z"></path><path fill="white" d="M256 0v117.4h-46.1l46.1 30.7v22.6h-22.6L160 121.8v48.9H96v-48.9l-73.4 48.9H0v-22.6l46.1-30.7H0v-64h46.1L0 22.7V0h22.6L96 48.9V0h64v48.9L233.4 0z"></path><g fill="#D80027"><path d="M144 0h-32v69.4H0v32h112v69.3h32v-69.3h112v-32H144z"></path><path d="M0 0v15.1l57.4 38.3H80zM256 0v15.1l-57.4 38.3H176z"></path></g><path fill="#2E52B2" d="M256 22.7v30.7h-46.1z"></path><g fill="#D80027"><path d="M0 0v15.1l57.4 38.3H80zM256 0v15.1l-57.4 38.3H176z"></path></g><path fill="#2E52B2" d="M256 22.7v30.7h-46.1z"></path><g fill="#D80027"><path d="M0 170.7v-15.1l57.4-38.2H80zM256 170.7v-15.1l-57.4-38.2H176z"></path></g><path fill="#29DBFF" d="M449 139.7c-.1 44.4-7.2 92.1-65 114.9-57.8-22.8-64.9-70.5-65-114.9h130z"></path><path fill="#ffda44" d="M449 139.7c0-16.7-.9-32.9-.5-47.1C426.9 83 398.4 81 383.9 81s-42.9 2-64.6 11.6c.4 14.2-.5 30.4-.5 47.1H449z"></path><path fill="#BF521B" d="M369.5 204.5l.3 10.3-12.8.2 4.9 13.2h-17.3c-18-20.2-23.4-42.4-24.9-68.1l9.1-9.7 8.3 14.3 10.8-12.8 7 7.8.8 15.7 13.8 29.1z"></path><path fill="#474747" d="M436.6 192.5l-8.6 18.3h-47l-29.2-19.5 25.7 10.5h25.1l3.7-6.5 7.2.2 2-3z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Saint Helena, Ascension and Tristan Da Cunha +290</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342"><path fill="#D80027" d="M0 0h513v342H0z"></path><path fill="#6DA544" d="M512 0H0v342"></path><path fill="#FFDA44" d="M307.7 0L0 194.5V342h206.9L513 148.5V0z"></path><path d="M513 0H385.2L0 249.4V341l126.2 1L513 91.6z"></path><g fill="white"><path d="M141.1 187l31.2 24 32.3-22.2-13.1 37 31.1 23.9-39.2-1.1-13.2 37-11.1-37.6-39.2-1.1 32.3-22.2zM310.6 70.8l31.2 23.9 32.3-22.2-13.1 37 31.1 23.9-39.2-1.1-13.2 37-11.1-37.6-39.2-1.1 32.4-22.2z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Saint Kitts and Nevis +1869</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342"><path fill="#55B2FF" d="M0 0h513v342H0z"></path><path fill="#F3F3F3" d="M148.5 298.1h216l-108-254.2z"></path><path fill="#333" d="M186 272.7l70.5-160.3L327 272.7z"></path><path fill="#FFDA44" d="M148.5 298.1h216l-108-101.7z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Saint Lucia +1758</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 108 72"><path d="M0 0h108v72H0z" fill="#003787"></path><path d="M0 0h108L60 48v24H48V48z" fill="white"></path><circle cx="54" cy="30" r="8" fill="#f9d90f"></circle><path d="M44 30h20L54 48z" fill="white"></path><path d="M54 48L38 33h32z" fill="#cf142b"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Saint Martin +590</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 26.666 640 426.666"><g fill-rule="evenodd" stroke-width="1pt"><path fill="white" d="M0 0h640v480H0z"></path><path fill="#00267f" d="M0 0h213.3v480H0z"></path><path fill="#f31830" d="M426.7 0H640v480H426.7z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Saint Pierre and Miquelon +508</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#FFDA44" d="M0 85.331h512v341.337H0z"></path><path fill="#338AF3" d="M0 85.331h170.663v341.337H0z"></path><g fill="#6DA544"><path d="M341.337 85.331H512v341.337H341.337zM214.261 283.82l-33.393-50.086 33.392-50.087 33.392 50.087zM297.739 283.82l-33.391-50.086 33.391-50.087 33.393 50.087zM256 350.603l-33.391-50.087L256 250.429l33.391 50.087z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Saint Vincent and the Grenadines +1784</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#D80027" d="M0 85.331h512v341.337H0z"></path><path fill="#0052B4" d="M0 85.331h256v170.663H0z"></path><g fill="white"><path d="M165.483 181.79l2.764 8.504h8.939l-7.232 5.254 2.763 8.503-7.234-5.255-7.233 5.255 2.763-8.503-7.233-5.254h8.94zM120.579 115.007l4.606 14.173h14.9l-12.055 8.757 4.605 14.171-12.056-8.758-12.054 8.758 4.605-14.171-12.056-8.757h14.901zM165.101 129.848l4.606 14.172h14.9l-12.055 8.757 4.604 14.173-12.055-8.76-12.054 8.76 4.604-14.173-12.055-8.757h14.9zM129.909 189.211l4.606 14.172h14.9l-12.055 8.758 4.604 14.171-12.055-8.759-12.054 8.759 4.604-14.171-12.055-8.758h14.9zM90.899 152.108l4.605 14.173h14.9l-12.055 8.757 4.604 14.173-12.054-8.76-12.055 8.76 4.604-14.173-12.055-8.757h14.9z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Samoa +685</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#338AF3" d="M0 85.34h512v341.326H0z"></path><path fill="white" d="M512 85.334v166.69L0 256.175V85.334z"></path><path fill="#6DA544" d="M323.744 203.099L256 270.843l-67.744-67.744a81.156 81.156 0 00-13.879 45.483v22.261c0 35.744 23.097 66.193 55.148 77.213-4.277 8.385-3.556 18.848 2.712 26.671l24.258-19.439 24.258 19.439c6.342-7.915 7.011-18.534 2.564-26.968 31.614-11.261 54.308-41.485 54.308-76.916v-22.261a81.174 81.174 0 00-13.881-45.483z"></path><path fill="#FFDA44" d="M256 330.206c-32.732 0-59.362-26.63-59.362-59.362v-22.261c0-32.733 26.63-59.363 59.362-59.363s59.362 26.63 59.362 59.362v22.261c0 32.733-26.63 59.363-59.362 59.363z"></path><path fill="#338AF3" d="M293.101 270.843v-22.261c0-20.458-16.643-37.101-37.101-37.101s-37.101 16.643-37.101 37.101v22.261L256 278.264l37.101-7.421z"></path><path fill="#6DA544" d="M218.899 270.843c0 20.458 16.643 37.101 37.101 37.101s37.101-16.643 37.101-37.101h-74.202z"></path><path fill="#FFDA44" d="M300.522 189.22c0-12.295-9.966-22.261-22.261-22.261a22.173 22.173 0 00-14.84 5.672v-13.093h7.421v-14.84h-7.421v-7.421h-14.84v7.421h-7.421v14.84h7.421v13.093a22.177 22.177 0 00-14.841-5.672c-12.295 0-22.261 9.966-22.261 22.261 0 6.591 2.867 12.512 7.421 16.589v13.093h74.203v-13.093c4.552-4.077 7.419-9.997 7.419-16.589z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">San Marino +378</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#FFDA44" d="M0 85.337h512v341.326H0z"></path><g fill="#6DA544"><path d="M0 85.337h512v113.775H0zM0 312.888h512v113.775H0z"></path></g><path fill="#D80027" d="M256 256.006L0 426.668V85.331z"></path><path d="M302.049 226.318l7.368 22.674h23.842l-19.288 14.016 7.366 22.674-19.288-14.015-19.287 14.015 7.366-22.674-19.288-14.016h23.842zM376.252 226.318l7.367 22.674h23.842l-19.288 14.016 7.367 22.674-19.288-14.015-19.288 14.015 7.367-22.674-19.288-14.016h23.842z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Sao Tome and Principe +239</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#6DA544" d="M0 85.331h512v341.337H0z"></path><g fill="white"><path d="M183.548 289.386c0 12.295 9.731 22.261 21.736 22.261h65.208c0 10.244 8.11 18.551 18.114 18.551h21.736c10.004 0 18.114-8.306 18.114-18.551v-22.261H183.548zM330.264 181.791v51.942c0 8.183-6.5 14.84-14.491 14.84v22.261c19.976 0 36.226-16.643 36.226-37.101v-51.942h-21.735zM174.491 233.734c0 8.183-6.5 14.84-14.491 14.84v22.261c19.976 0 36.226-16.643 36.226-37.101v-51.942H174.49v51.942z"></path><path d="M297.661 181.788h21.736v51.942h-21.736zM265.057 211.473c0 2.046-1.625 3.71-3.623 3.71-1.998 0-3.623-1.664-3.623-3.71v-29.682h-21.736v29.682c0 2.046-1.625 3.71-3.623 3.71s-3.623-1.664-3.623-3.71v-29.682h-21.736v29.682c0 14.32 11.376 25.971 25.358 25.971 5.385 0 10.38-1.733 14.491-4.677 4.11 2.944 9.106 4.677 14.491 4.677 1.084 0 2.15-.078 3.2-.215-1.54 6.499-7.255 11.345-14.068 11.345v22.261c19.976 0 36.226-16.643 36.226-37.101v-51.943h-21.736l.002 29.682z"></path><path d="M207.093 248.57h32.601v22.261h-32.601z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Saudi Arabia +966</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#FFDA44" d="M0 85.331h512v341.326H0z"></path><path fill="#D80027" d="M330.207 85.331H512v341.337H330.207z"></path><g fill="#496E2D"><path d="M0 85.331h181.793v341.337H0zM255.999 196.632l14.733 45.347h47.685l-38.576 28.029 14.734 45.348-38.576-28.026-38.577 28.026 14.737-45.348-38.576-28.029h47.681z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Senegal +221</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#0052B4" d="M0 85.331h512v341.337H0z"></path><path fill="#D80027" d="M0 85.331h512v113.775H0z"></path><path fill="white" d="M0 312.882h512v113.775H0z"></path><path fill="#D80027" d="M129.468 181.793v85.136c0 48.429 63.267 63.267 63.267 63.267S256 315.356 256 266.929v-85.136H129.468z"></path><g fill="#FFDA44"><path d="M155.634 196.634h74.201v-29.681l-14.841 7.42-22.261-22.26-22.259 22.26-14.84-7.42zM241.16 278.782l-48.231-48.231-48.231 48.231 15.741 15.74 32.49-32.49 32.49 32.49z"></path></g><path fill="white" d="M241.16 233.734h-22.504a14.74 14.74 0 002.001-7.418c0-8.196-6.645-14.84-14.84-14.84-5.663 0-10.581 3.172-13.083 7.836-2.502-4.663-7.421-7.836-13.083-7.836-8.195 0-14.84 6.644-14.84 14.84 0 2.706.736 5.235 2.001 7.418h-22.114c0 8.196 7.139 14.84 15.334 14.84h-.494c0 8.196 6.644 14.84 14.84 14.84 0 7.257 5.211 13.286 12.094 14.576l-11.694 26.401a48.075 48.075 0 0018.149 3.544 48.079 48.079 0 0018.149-3.544l-11.694-26.401c6.883-1.29 12.094-7.319 12.094-14.576 8.196 0 14.84-6.644 14.84-14.84h-.494c8.199 0 15.338-6.644 15.338-14.84z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Serbia +381</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="white" d="M0 85.337h512v341.326H0z"></path><path fill="#FFDA44" d="M235.454 85.337L0 426.663 427.345 85.337z"></path><path fill="#6DA544" d="M512 329.393L0 426.663h512z"></path><path fill="#D80027" d="M512 85.337h-84.655L0 426.663l512-204.512z"></path><path fill="#0052B4" d="M0 85.337v341.326L235.454 85.337z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Seychelles +248</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="white" d="M0 85.337h512v341.326H0z"></path><path fill="#6DA544" d="M0 85.337h512v113.775H0z"></path><path fill="#338AF3" d="M0 312.888h512v113.775H0z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Sierra Leone +232</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#0052B4" d="M0 85.337h512v341.326H0z"></path><path fill="#D80027" d="M512 85.331v166.69L0 256.173V85.331z"></path><path fill="white" d="M256 256.006L0 426.668V85.331z"></path><g fill="#FFDA44"><path d="M59.621 256a59.546 59.546 0 00-.193 4.57c0 32.821 26.607 59.429 59.429 59.429s59.429-26.607 59.429-59.429c0-1.539-.078-3.061-.193-4.57H59.621z"></path><circle cx="118.862" cy="210.287" r="18.286"></circle></g><path fill="#D80027" d="M77.715 205.714v59.429c0 31.494 41.144 41.143 41.144 41.143s41.144-9.649 41.144-41.143v-59.429H77.715z"></path><path fill="#338AF3" d="M118.877 287.148c-7.632-2.746-22.876-9.767-22.876-22.006v-41.144h45.715v41.144c-.001 12.28-15.244 19.283-22.839 22.006z"></path><path fill="#F3F3F3" d="M128.001 246.856v-9.142l-9.144-4.571-9.142 4.571v9.142l-4.571 4.573v18.285h27.428v-18.285z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Sint Maarten +1721</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="white" d="M0 85.337h512v341.326H0z"></path><path fill="#0052B4" d="M0 196.641h512v118.717H0z"></path><path fill="#D80027" d="M0 315.359h512v111.304H0z"></path><path fill="white" d="M129.468 181.799v85.136c0 48.429 63.267 63.267 63.267 63.267S256 315.362 256 266.935v-85.136H129.468z"></path><path fill="#D80027" d="M146.126 184.294v81.941c0 5.472 1.215 10.64 3.623 15.485h85.97c2.408-4.844 3.623-10.012 3.623-15.485v-81.941h-93.216z"></path><path fill="white" d="M221.301 241.427h-21.425v-14.283h14.284v-14.283h-14.284v-14.284h-14.283v14.284h-14.282v14.283h14.282v14.283h-21.426v14.284h21.426v14.283h14.283v-14.283h21.425z"></path><path fill="#0052B4" d="M169.232 301.658c9.204 5.783 18.66 9.143 23.502 10.636 4.842-1.494 14.298-4.852 23.502-10.636 9.282-5.833 15.79-12.506 19.484-19.939a24.878 24.878 0 00-14.418-4.583c-1.956 0-3.856.232-5.682.657-3.871-8.796-12.658-14.94-22.884-14.94-10.227 0-19.013 6.144-22.884 14.94a25.048 25.048 0 00-5.682-.657 24.88 24.88 0 00-14.418 4.583c3.691 7.433 10.198 14.106 19.48 19.939z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Slovakia +421</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="white" d="M0 85.337h512v341.326H0z"></path><path fill="#0052B4" d="M0 199.112h512v113.775H0z"></path><path fill="#D80027" d="M0 312.888h512v113.775H0z"></path><path fill="white" d="M233.606 196.639v14.837c0 34.081-44.522 44.522-44.522 44.522s-44.522-10.44-44.522-44.522v-14.837l-.145-44.188 89.043-.266.146 44.454z"></path><path fill="#0052B4" d="M233.606 196.639v14.837c0 34.081-44.522 44.522-44.522 44.522s-44.522-10.44-44.522-44.522v-14.837l-.145-44.188 89.043-.266.146 44.454z"></path><path fill="white" d="M233.606 196.639v14.837c0 34.081-44.522 44.522-44.522 44.522s-44.522-10.44-44.522-44.522v-14.837l14.848 14.837 29.674-22.261 29.685 22.261 14.837-14.837z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Slovenia +386</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#496E2D" d="M0 85.334h512v341.337H0z"></path><path fill="#0052B4" d="M0 426.663V85.329h512"></path><path fill="#FFDA44" d="M0 396.494v30.169h45.255L512 115.499v-30.17h-45.255z"></path><g fill="white"><path d="M85.688 108.787l5.12 15.756h16.566l-13.403 9.737 5.12 15.757-13.403-9.738-13.405 9.738 5.12-15.757L64 124.543h16.567zM170.312 108.787l5.121 15.756H192l-13.403 9.737 5.12 15.757-13.405-9.738-13.403 9.738 5.12-15.757-13.403-9.737h16.566zM85.688 191.289l5.12 15.756h16.566l-13.403 9.738 5.12 15.757-13.403-9.739-13.405 9.739 5.12-15.757L64 207.045h16.567zM170.312 191.289l5.121 15.756H192l-13.403 9.738 5.12 15.757-13.405-9.739-13.403 9.739 5.12-15.757-13.403-9.738h16.566zM128 150.037l5.12 15.756h16.568l-13.405 9.738 5.12 15.758L128 181.55l-13.403 9.739 5.12-15.758-13.405-9.738h16.568z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Solomon Islands +677</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#338AF3" d="M0 85.331h512v341.337H0z"></path><path fill="white" d="M256 157.273l22.663 69.748H352l-59.332 43.106 22.664 69.749L256 296.769l-59.332 43.107 22.664-69.749L160 227.021h73.337z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Somalia +252</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="white" d="M0 85.337h512v341.326H0z"></path><path d="M114.024 256.001L0 141.926v228.17z"></path><path fill="#FFDA44" d="M161.192 256L0 94.7v47.226l114.024 114.075L0 370.096v47.138z"></path><path fill="#6DA544" d="M509.833 289.391c.058-.44.804-.878 2.167-1.318v-65.464H222.602L85.33 85.337H0V94.7L161.192 256 0 417.234v9.429h85.33l137.272-137.272h287.231z"></path><path fill="#0052B4" d="M503.181 322.783H236.433l-103.881 103.88H512v-103.88z"></path><path fill="#D80027" d="M503.181 189.217H512V85.337H132.552l103.881 103.88z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">South Africa +27</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 341.3"><path fill="#0052B4" d="M0 0h512v341.3H0z"></path><path fill="white" d="M256 0v117.4h-46.1l46.1 30.7v22.6h-22.6L160 121.8v48.9H96v-48.9l-73.4 48.9H0v-22.6l46.1-30.7H0v-64h46.1L0 22.7V0h22.6L96 48.9V0h64v48.9L233.4 0z"></path><path fill="#D80027" d="M144 0h-32v69.4H0v32h112v69.3h32v-69.3h112v-32H144z"></path><path fill="#2E52B2" d="M256 22.7v30.7h-46.1z"></path><path fill="#D80027" d="M0 170.7v-11l62.5-42.3h22.6L7.3 170.7zM7.3.1l77.8 53.2H62.5L0 11.1V.1zM256 .1v11l-62.5 42.3h-22.6L248.7.1zM248.7 170.7l-77.8-53.3h22.6l62.5 42.3v11z"></path><g><ellipse fill="white" cx="443.4" cy="233.6" rx="29" ry="43.5"></ellipse><ellipse fill="#FFCE00" cx="406.9" cy="317.7" rx="22" ry="9.3"></ellipse><ellipse fill="#FFCE00" cx="364" cy="317.7" rx="22" ry="9.3"></ellipse><path fill="#39B200" d="M342 190.1l43.4 86.9 43.5-86.9z"></path><ellipse fill="#9B9B9B" cx="327.5" cy="233.6" rx="29" ry="43.5"></ellipse><path fill="#757575" d="M371 175.6l-14.5 14.5h57.9l-14.5-14.5 14.5-43.5s-13-29-29-29-29 29-29 29l14.6 43.5z"></path><circle fill="#C6B56F" cx="385.4" cy="67" r="29"></circle><circle fill="#A54A00" cx="386" cy="88.7" r="29"></circle><circle fill="white" cx="443.4" cy="117.7" r="29"></circle><circle fill="#0049FF" cx="342.2" cy="146.7" r="29"></circle><circle fill="#0041F9" cx="429.8" cy="146.7" r="29"></circle><circle fill="#F7D71E" cx="386" cy="233.6" r="29"></circle><circle fill="#CEC851" cx="457.9" cy="190.1" r="29"></circle><circle fill="white" cx="385.4" cy="289.5" r="29"></circle><path fill="#7C0B29" d="M371 135.7l14.5-3.5 14.5 3.5c0 7.5-14.5 11-14.5 11s-14.5-3.5-14.5-11z"></path><circle fill="white" cx="327.5" cy="117.4" r="29"></circle></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">South Georgia and the South Sandwich Islands +500</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="white" d="M0 85.337h512v341.326H0z"></path><path fill="#496E2D" d="M0 322.783h512v103.88H0z"></path><path d="M0 85.337h512v104.515H0z"></path><path fill="#A2001D" d="M0 210.877h512v89.656H0z"></path><path fill="#0052B4" d="M256 256.006L0 426.668V85.331z"></path><path fill="#FFDA44" d="M73.178 209.188l20.831 29.067 34.084-10.83-21.207 28.795 20.83 29.069-33.939-11.271-21.208 28.794.234-35.762-33.94-11.273 34.083-10.83z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">South Sudan +211</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#FFDA44" d="M0 85.331h512v341.337H0z"></path><g fill="#D80027"><path d="M0 85.331h512v113.775H0zM0 312.882h512v113.775H0z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Spain +34</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#FFDA44" d="M0 85.329v341.337h512V85.329H0zm489.739 319.076h-267.13V107.59h267.13v296.815z"></path><path fill="#A2001D" d="M222.609 107.595h267.13V404.41h-267.13z"></path><path fill="#D80027" d="M22.261 107.595h200.348V404.41H22.261z"></path><path fill="#FFDA44" d="M200.348 85.334h22.261v341.337h-22.261z"></path><path fill="#6DA544" d="M22.261 107.595h89.043V404.41H22.261z"></path><path fill="#FF9811" d="M111.304 107.595h89.043V404.41h-89.043z"></path><g fill="#FFDA44"><path d="M358.675 250.438v-44.522c0-7.424-11.13-14.848-11.13-14.848s-11.13 7.424-11.13 14.848h-44.522v44.522h22.261v22.261c0 4.875.979 9.539 2.76 13.768l-10.184 8.493h-29.674V157.677c-12.299 0-22.261 9.973-22.261 22.261v96.467a22.19 22.19 0 007.413 16.584v35.361h14.848v-18.554h66.783v29.685H328.99v14.837h29.685v-29.685l13.601-14.837h44.288v29.685h-14.848v14.837h29.685v-29.685l13.601-14.837 12.552-40.259-11.038-19.1h-38.945c-14.169-.122-40.637.09-48.896.001z"></path><path d="M370.551 211.844v25.229h71.513v13.365h4.452v-17.817h-71.513v-16.325h75.965v-4.452zM222.609 107.595h22.261v22.261h-22.261zM467.478 107.595h22.261v22.261h-22.261zM222.609 382.138h22.261v22.261h-22.261zM467.478 382.138h22.261v22.261h-22.261z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Sri Lanka +94</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="white" d="M0 85.337h512v341.326H0z"></path><path fill="#D80027" d="M0 85.337h512v113.775H0z"></path><path d="M0 312.888h512v113.775H0z"></path><path fill="#496E2D" d="M0 426.668V85.331l256 170.675z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Sudan +249</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="white" d="M0 85.331h512v341.337H0z"></path><path fill="#A2001D" d="M0 196.636h512v118.728H0z"></path><g fill="#6DA544"><path d="M0 352.462h512v74.207H0zM0 85.331h512v74.207H0z"></path></g><path fill="#FFDA44" d="M256.742 218.003l9.43 29.021h30.518L272 264.963l9.431 29.023-24.689-17.937-24.689 17.937 9.431-29.023-24.69-17.939h30.518z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Suriname +597</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#D80027" d="M0 85.334h512v341.337H0z"></path><path fill="white" d="M512 295.883H202.195v130.783H122.435V295.883H0V216.111h122.435V85.329H202.195v130.782H512V277.329z"></path><path fill="#2E52B2" d="M512 234.666v42.663H183.652v149.337h-42.674V277.329H0v-42.663h140.978V85.329h42.674v149.337z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Svalbard and Jan Mayen +47</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#0052B4" d="M0 85.333h512V426.67H0z"></path><path fill="#FFDA44" d="M192 85.33h-64v138.666H0v64h128v138.666h64V287.996h320v-64H192z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Sweden +46</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#D80027" d="M0 85.337h512v341.326H0z"></path><path fill="white" d="M356.174 222.609h-66.783v-66.783h-66.782v66.783h-66.783v66.782h66.783v66.783h66.782v-66.783h66.783z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Switzerland +41</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="white" d="M0 85.331h512v341.337H0z"></path><path fill="#D80027" d="M0 85.331h512v113.775H0z"></path><path d="M0 312.882h512v113.775H0z"></path><g fill="#6DA544"><path d="M187.31 215.184l9.208 28.341h29.802l-24.11 17.518 9.209 28.342-24.109-17.516-24.11 17.516 9.209-28.342-24.109-17.518h29.801zM324.69 215.184l9.209 28.341H363.7l-24.109 17.518 9.209 28.342-24.11-17.516-24.109 17.516 9.209-28.342-24.11-17.518h29.802z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Syrian Arab Republic +963</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#D80027" d="M0 85.337h512v341.326H0z"></path><path fill="#0052B4" d="M0 85.337h256V256H0z"></path><path fill="white" d="M186.435 170.669L162.558 181.9l12.714 23.125-25.927-4.961-3.286 26.192L128 206.993l-18.06 19.263-3.285-26.192-25.927 4.96 12.714-23.125-23.877-11.23 23.877-11.231-12.714-23.125 25.927 4.96 3.286-26.192L128 134.344l18.06-19.263 3.285 26.192 25.928-4.96-12.715 23.125z"></path><circle fill="#0052B4" cx="128" cy="170.674" r="29.006"></circle><path fill="white" d="M128 190.06c-10.692 0-19.391-8.7-19.391-19.391 0-10.692 8.7-19.391 19.391-19.391 10.692 0 19.391 8.7 19.391 19.391 0 10.691-8.699 19.391-19.391 19.391z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Taiwan +886</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="white" d="M0 85.337h512v341.326H0z"></path><path fill="#D80027" d="M0 85.337h512v113.775H0z"></path><path fill="#6DA544" d="M0 312.888h512v113.775H0z"></path><g fill="#FFDA44"><path d="M226.318 300.522h59.364v-25.23l-11.873 5.937L256 263.421l-17.809 17.808-11.873-5.937zM192.355 270.84l2.763 8.504h8.94l-7.233 5.255 2.763 8.502-7.233-5.255-7.234 5.255 2.763-8.502-7.233-5.255h8.94zM200.921 241.16l2.763 8.502h8.94l-7.233 5.255 2.763 8.504-7.233-5.256-7.234 5.256 2.763-8.504-7.233-5.255h8.94zM225.409 218.899l2.763 8.502h8.94l-7.233 5.255 2.763 8.504-7.233-5.256-7.234 5.256 2.763-8.504-7.233-5.255h8.94zM319.645 270.84l-2.763 8.504h-8.94l7.233 5.255-2.763 8.502 7.233-5.255 7.234 5.255-2.763-8.502 7.233-5.255h-8.94zM311.079 241.16l-2.763 8.502h-8.94l7.233 5.255-2.763 8.504 7.233-5.256 7.234 5.256-2.763-8.504 7.233-5.255h-8.94zM286.591 218.899l-2.763 8.502h-8.94l7.233 5.255-2.763 8.504 7.233-5.256 7.234 5.256-2.763-8.504 7.233-5.255h-8.94zM256 207.767l2.763 8.503h8.941l-7.234 5.256 2.763 8.502-7.233-5.254-7.233 5.254 2.763-8.502-7.234-5.256h8.941z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Tajikistan +992</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#338AF3" d="M0 85.337h512v341.326H0z"></path><path fill="#6DA544" d="M0 426.663V85.337h512"></path><path fill="#FFDA44" d="M512 152.222V85.337H411.67L0 359.778v66.885h100.33z"></path><path d="M512 85.337v40.125L60.193 426.663H0v-40.125L451.807 85.337z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Tanzania, United Republic of Tanzania +255</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="white" d="M0 85.334h512V426.66H0z"></path><path fill="#0052B4" d="M0 194.056h512v123.882H0z"></path><g fill="#D80027"><path d="M0 85.334h512v54.522H0zM0 372.143h512v54.522H0z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Thailand +66</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#D80027" d="M0 85.337h512v341.326H0z"></path><path fill="#FFDA44" d="M256 256L0 90.691v44.242L155.826 256 0 377.067v44.242z"></path><path d="M0 90.691v330.618L189.217 256z"></path><path fill="white" d="M44.184 213.36l24.912 23.577 30.121-16.41-14.723 30.98 24.911 23.575-34.012-4.43L60.67 301.63l-6.296-33.716-34.012-4.43 30.119-16.408z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Timor-Leste +670</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#FFDA44" d="M0 85.337h512v341.326H0z"></path><g fill="#496E2D"><path d="M0 85.337h512V153.6H0zM0 358.4h512v68.263H0zM0 221.863h512v68.263H0z"></path></g><path fill="#D80027" d="M0 85.337h204.054v204.054H0z"></path><path fill="white" d="M102.026 133.938l13.26 40.812h42.916l-34.718 25.226 13.26 40.814-34.718-25.224-34.719 25.224 13.263-40.814-34.718-25.226h42.913z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Togo +228</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#0052B4" d="M0 85.337h512v341.326H0z"></path><g fill="white"><path d="M210.715 174.377l3.684 11.338h11.919l-9.643 7.006 3.684 11.337-9.644-7.007-9.644 7.007 3.684-11.337-9.645-7.006h11.921zM116.816 281.971l4.605 14.172h14.9l-12.055 8.757 4.606 14.173-12.056-8.76-12.055 8.76 4.604-14.173-12.054-8.757h14.899zM144.696 119.679l4.604 14.172h14.901l-12.056 8.758 4.606 14.171-12.055-8.759-12.056 8.759 4.606-14.171-12.055-8.758h14.9zM69.539 175.331l4.604 14.172h14.9l-12.055 8.758 4.606 14.171-12.055-8.758-12.056 8.758 4.606-14.171-12.055-8.758h14.9z"></path></g><g fill="#FFDA44"><path d="M483.386 354.503H117.801s109.234-88.562 310.593-220.938c.001 0-88.443 128.935 54.992 220.938zM117.801 366.089c-11.177 0-11.195 17.37 0 17.37h365.585c11.177 0 11.195-17.37 0-17.37H117.801z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Tokelau +690</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#D80027" d="M0 85.331h512v341.337H0z"></path><path fill="white" d="M0 85.331h256v170.663H0z"></path><path fill="#D80027" d="M141.357 157.303V130.59h-26.714v26.713H87.93v26.713h26.713v26.713h26.714v-26.713h26.713v-26.713z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Tonga +676</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#D80027" d="M0 85.337h512v341.326H0z"></path><path fill="white" d="M6.066 85.337l207.961 212.636 131.584 128.69h160.323L297.973 214.027 166.389 85.337z"></path><path d="M43.364 85.337L384.69 426.663h83.946L127.31 85.337z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Trinidad and Tobago +1868</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#D80027" d="M0 85.331h512v341.337H0z"></path><circle fill="white" cx="256" cy="255.994" r="96"></circle><g fill="#D80027"><path d="M267.826 219.291l16.47 22.695 26.673-8.649-16.496 22.676 16.468 22.695-26.664-8.681-16.495 22.676.017-28.04-26.664-8.682 26.674-8.648z"></path><path d="M277.818 312.724c-31.33 0-56.727-25.397-56.727-56.727s25.397-56.727 56.727-56.727c9.769 0 18.96 2.47 26.985 6.819-12.589-12.31-29.804-19.909-48.803-19.909-38.558 0-69.818 31.259-69.818 69.818s31.26 69.818 69.818 69.818c18.999 0 36.215-7.599 48.803-19.909-8.026 4.347-17.216 6.817-26.985 6.817z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Tunisia +216</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 450 300"><path fill="#d80027" d="M0 150V0h450v300H0V150z"></path><path fill="white" d="M247.3 118.3l35.2 5.8L307.4 99l5.1 32.8L344 150l-31.5 18.2-4.9 33.5-25.1-25.9-35.2 5.8L263 150z"></path><path fill="white" d="M240.6 228.6c-43.3 0-78.3-35.1-78.3-78.3S197.4 72 240.6 72c8.1 0 15.8 1.2 23.2 3.5-17.3-15-39.8-24-64.5-24-54.4 0-98.6 44.1-98.6 98.6s44.1 98.6 98.6 98.6c24.2 0 46.3-8.7 63.4-23.1-7 1.9-14.4 3-22.1 3z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Turkey +90</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#496E2D" d="M0 85.337h512v341.326H0z"></path><g fill="white"><path d="M357.208 183.679c8.397-23.404-1.036-48.858-21.281-61.536a52.131 52.131 0 0110.884 2.621c27.002 9.688 41.038 39.428 31.35 66.431s-39.428 41.038-66.431 31.35a52.182 52.182 0 01-10.069-4.895c23.686 3.084 47.15-10.566 55.547-33.971zM310.637 115.729l-7.297 9.427-11.22-4.026 6.712 9.852-7.296 9.427 11.443-3.338 6.712 9.852.361-11.914 11.444-3.339-11.221-4.025z"></path><path d="M330.338 146.448l-7.296 9.427-11.221-4.026 6.712 9.852-7.296 9.427 11.443-3.339 6.712 9.853.36-11.915 11.445-3.34-11.221-4.024zM275.9 126.916l-7.296 9.427-11.219-4.024 6.711 9.851-7.296 9.426 11.443-3.338 6.712 9.852.361-11.915 11.444-3.337-11.221-4.027zM275.101 162.105l-7.296 9.427-11.221-4.026 6.712 9.852-7.296 9.427 11.444-3.338 6.711 9.852.362-11.915 11.443-3.338-11.22-4.026zM308.585 174.118l-7.296 9.427-11.22-4.026 6.712 9.853-7.297 9.426 11.444-3.338 6.712 9.852.36-11.915 11.443-3.338-11.219-4.025z"></path></g><path fill="#D80027" d="M83.478 85.337h89.043v341.326H83.478z"></path><path fill="white" d="M117.458 175.191l-14.908-11.105v-15.705l14.908-11.105h21.084l14.908 11.105v15.705l-14.908 11.105z"></path><g fill="#FF9811"><path d="M128 137.276h-10.542l-14.908 11.105v7.678H128zM128 175.191h10.542l14.908-11.105v-8.012H128z"></path></g><path fill="white" d="M117.458 374.725l-14.908-11.106v-15.704l14.908-11.105h21.084l14.908 11.105v15.704l-14.908 11.106z"></path><g fill="#FF9811"><path d="M128 336.81h-10.542l-14.908 11.105v7.678H128zM128 374.725h10.542l14.908-11.106v-8.011H128z"></path></g><g fill="#496E2D"><path d="M117.458 274.957l-14.908-11.105v-15.703l14.908-11.106h21.084l14.908 11.106v15.703l-14.908 11.105zM153.971 299.391h-6.493v-6.493h-11.411l-8.068-8.068-8.067 8.068h-11.41v6.493h-6.493v12.986h6.493v6.492h11.41l8.068 8.069 8.068-8.069h11.41v-6.492h6.493zM153.971 199.623h-6.493v-6.492h-11.411l-8.068-8.069-8.067 8.069h-11.41v6.492h-6.493v12.986h6.493v6.492h11.41l8.068 8.07 8.068-8.07h11.41v-6.492h6.493z"></path></g><g fill="#D80027"><path d="M120.576 248.576h14.84v14.84h-14.84z"></path><circle cx="128" cy="206.113" r="7.421"></circle><circle cx="128" cy="305.887" r="7.421"></circle></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Turkmenistan +993</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#0052B4" d="M0 85.333h512V426.67H0z"></path><path fill="#FFDA44" d="M332.058 191.996v78.221c0 38.103 51.942 49.779 51.942 49.779s51.942-11.675 51.942-49.779v-78.221H332.058z"></path><path fill="#FF9811" d="M376.579 220.44c0 7.855-6.644 28.445-14.84 28.445s-14.84-20.589-14.84-28.445c0-7.856 14.84-14.222 14.84-14.222s14.84 6.367 14.84 14.222z"></path><path fill="#A2001D" d="M415.961 235.93c2.394-5.6 4.257-13.785 4.257-17.86 0-6.546-8.904-11.852-8.904-11.852s-8.904 5.306-8.904 11.852c0 4.075 1.862 12.26 4.257 17.86l-5.141 11.123a26.898 26.898 0 009.788 1.831c3.463 0 6.766-.654 9.788-1.831l-5.141-11.123z"></path><path fill="#6DA544" d="M372.87 270.217s-7.421 14.222-7.421 28.445h37.101c0-14.222-7.421-28.445-7.421-28.445l-11.13-7.111-11.129 7.111z"></path><path fill="#D80027" d="M395.13 270.217v-3.555c0-5.891-4.983-10.666-11.13-10.666-6.147 0-11.13 4.776-11.13 10.666v3.555h22.26z"></path><path fill="white" d="M256 85.333v30.553l-45.167 25.099H256v59.359h-59.103L256 233.179v22.817h-26.68l-73.494-40.826v40.826h-55.652v-48.573l-87.43 48.573H0v-30.554l45.167-25.098H0v-59.359h59.103L0 108.139V85.333h26.68l73.494 40.825V85.333h55.652v48.572l87.43-48.572z"></path><path fill="#D80027" d="M144 85.33h-32v69.332H0v32h112v69.334h32v-69.334h112v-32H144z"></path><path fill="#0052B4" d="M155.826 200.344L256 255.996v-15.737l-71.847-39.915z"></path><path fill="white" d="M155.826 200.344L256 255.996v-15.737l-71.847-39.915z"></path><g fill="#D80027"><path d="M155.826 200.344L256 255.996v-15.737l-71.847-39.915zM71.846 200.344L0 240.259v15.737l100.174-55.652z"></path></g><path fill="#0052B4" d="M100.174 140.982L0 85.33v15.737l71.847 39.915z"></path><path fill="white" d="M100.174 140.982L0 85.33v15.737l71.847 39.915z"></path><g fill="#D80027"><path d="M100.174 140.982L0 85.33v15.737l71.847 39.915zM184.154 140.982L256 101.067V85.33l-100.174 55.652z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Turks and Caicos Islands +1649</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 600"><path fill="#0052B4" d="M0 0h900v600H0z"></path><path fill="#00B2EE" d="M0 300h450V0h450v600H0V300z"></path><path fill="#FFDA44" d="M345.3 480.9l29.4 90.6-77.1-56H393l-77.1 56 29.4-90.6zM706.4 340l29.4 90.6-77.1-56H754l-77.1 56 29.5-90.6zM812.8 261.5l29.4 90.6-77.1-56h95.3l-77.1 56 29.5-90.6zM812.8 37.4l29.4 90.6-77.1-56h95.3l-77.1 56 29.5-90.6z"></path><path fill="white" d="M449.9 0v206.3h-81l81 54V300h-39.7l-129-85.9V300H168.7v-85.9L39.7 300H0v-39.7l81-54H0V93.8h81L0 39.9V0h39.7l129 85.9V0h112.5v85.9L410.2 0z"></path><path fill="#D80027" d="M253.1 0h-56.3v122H0v56.2h196.8V300h56.3V178.2h196.8V122H253.1z"></path><path fill="#2E52B2" d="M449.9 39.9v53.9h-81z"></path><path fill="#D80027" d="M0 300v-19.3l109.9-74.4h39.7L12.8 300zM12.8.1l136.8 93.7h-39.7L0 19.4V.1zM449.9.2v19.3L340 93.8h-39.7L437.1.2zM437.1 300l-136.8-93.7H340l109.9 74.4V300z"></path><path fill="#FFDA44" d="M719.9 131.6l29.4 90.6-77.1-56h95.3l-77.1 56 29.5-90.6zM584 187.7l29.4 90.6-77.1-56h95.3l-77.1 56 29.5-90.6zM614 430.6l29.4 90.6-77.1-56h95.3l-77.1 56 29.5-90.6zM488 332l29.4 90.6-77.1-56h95.3l-77.1 56L488 332zM488 464l29.4 90.6-77.1-56h95.3l-77.1 56L488 464z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Tuvalu +688</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 341.3"><path fill="#232323" d="M0 0h512v341.3H0z"></path><path fill="#FFDA44" d="M0 56.9h512v56.9H0z"></path><path fill="#D32300" d="M0 113.8h512v56.9H0z"></path><path fill="#FFDA44" d="M0 227.6h512v56.9H0z"></path><path fill="#D32300" d="M0 284.4h512v56.9H0z"></path><circle fill="white" cx="256" cy="170.7" r="80.7"></circle><path d="M234.5 127.5c.9-1.4-19.6-2-19.6-2 1.7-2.5 18.4-10.5 18.4-10.5s-.9-6 2.7-9.8l-4.5-9.8s7-3.4 18.4-3.4 19.9 7 21 13.1l-6.4 3.4c-.1 4.7 1.7 11.6-4.3 17.3-5.9 5.7-8.3 6.9-8.5 18.8 0 3.9 2.3 8.2 8.8 11.7 17.4 9.3 38.6 28.2 44.6 33.9 6.1 5.7 5.1 19.2 2.6 25.2s-12.1 14.3-14.3 13.6c-2.2-.6 1.2-9.2-3.5-11.6 0 0-8.9-7.6-16.8.6s-.2 25.2 3.9 28c4.1 2.8 1.7 5-1.9 5H247c-3.8 0-5.4-2.3-1.9-5 7.6-3.8 12.4-15.3 7.4-20.3-4.9-4.9-18.3 1.5-21.5 6.3-2.8 2.8-8.8 3.6-12.9-1.4s-4.1-10.4-1.1-12.5c7-4.8 0 0 .1-.1 0 0 11.9-8.6 29.9-9 3.9 0 4.8-2.2 2.2-4.8 0 0-30.9-27.4-28.1-44.2 3-18.3 20-26.3 13.4-32.5-1.3-1.8 0 0 0 0z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Uganda +256</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#FFDA44" d="M0 85.337h512v341.326H0z"></path><path fill="#338AF3" d="M0 85.337h512V256H0z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Ukraine +380</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="white" d="M0 85.333h512V426.67H0z"></path><path fill="#D80027" d="M288 85.33h-64v138.666H0v64h224v138.666h64V287.996h224v-64H288z"></path><g fill="#0052B4"><path d="M393.785 315.358L512 381.034v-65.676zM311.652 315.358L512 426.662v-31.474l-143.693-79.83zM458.634 426.662l-146.982-81.664v81.664z"></path></g><path fill="white" d="M311.652 315.358L512 426.662v-31.474l-143.693-79.83z"></path><path fill="#D80027" d="M311.652 315.358L512 426.662v-31.474l-143.693-79.83z"></path><g fill="#0052B4"><path d="M90.341 315.356L0 365.546v-50.19zM200.348 329.51v97.151H25.491z"></path></g><path fill="#D80027" d="M143.693 315.358L0 395.188v31.474l200.348-111.304z"></path><g fill="#0052B4"><path d="M118.215 196.634L0 130.958v65.676zM200.348 196.634L0 85.33v31.474l143.693 79.83zM53.366 85.33l146.982 81.664V85.33z"></path></g><path fill="white" d="M200.348 196.634L0 85.33v31.474l143.693 79.83z"></path><path fill="#D80027" d="M200.348 196.634L0 85.33v31.474l143.693 79.83z"></path><g fill="#0052B4"><path d="M421.659 196.636L512 146.446v50.19zM311.652 182.482V85.331h174.857z"></path></g><path fill="#D80027" d="M368.307 196.634L512 116.804V85.33L311.652 196.634z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">United Kingdom +44</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342"><path fill="white" d="M0 0h513v342H0z"></path><g fill="#338AF3"><path d="M0 38h513v38H0zM0 114h513v38H0zM0 190h513v38H0zM0 266h513v38H0z"></path></g><path fill="white" d="M0 0h256.5v190H0z"></path><path fill="#FFDA44" d="M192 95l-26.2 12.3 14 25.3-28.4-5.4-3.6 28.7-19.8-21.1-19.8 21.1-3.6-28.7-28.4 5.4 14-25.3L64 95l26.2-12.3-14-25.3 28.4 5.4 3.6-28.7L128 55.2l19.8-21.1 3.6 28.7 28.4-5.4-14 25.3z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Uruguay +598</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#D80027" d="M0 85.337h512v341.326H0z"></path><path fill="#6DA544" d="M0 322.783h512v103.88H0z"></path><path fill="#338AF3" d="M0 85.337h512v104.515H0z"></path><path fill="white" d="M0 210.877h512v89.656H0z"></path><path fill="#338AF3" d="M0 85.337h512v104.515H0z"></path><g fill="white"><path d="M188.688 137.589c0-15.984 11.234-29.339 26.236-32.614a33.531 33.531 0 00-7.155-.777c-18.442 0-33.391 14.949-33.391 33.391s14.949 33.391 33.391 33.391c2.458 0 4.85-.273 7.155-.777-15.002-3.275-26.236-16.63-26.236-32.614zM234.658 152.766l2.261 6.957h7.315l-5.918 4.301 2.261 6.956-5.919-4.3-5.918 4.3 2.261-6.956-5.918-4.301h7.315zM258.006 152.766l2.26 6.957h7.315l-5.918 4.301 2.261 6.956-5.918-4.3-5.918 4.3 2.26-6.956-5.917-4.301h7.314zM281.353 152.766l2.26 6.957h7.315l-5.917 4.301 2.26 6.956-5.918-4.3-5.918 4.3 2.26-6.956-5.918-4.301h7.315zM304.7 152.766l2.262 6.957h7.315l-5.919 4.301 2.261 6.956-5.919-4.3-5.918 4.3 2.262-6.956-5.919-4.301h7.314zM328.048 152.766l2.26 6.957h7.315l-5.918 4.301 2.261 6.956-5.918-4.3-5.918 4.3 2.26-6.956-5.917-4.301h7.314zM258.006 128.482l2.26 6.956h7.315l-5.918 4.3 2.261 6.957-5.918-4.299-5.918 4.299 2.26-6.957-5.917-4.3h7.314zM281.353 128.482l2.26 6.956h7.315l-5.917 4.3 2.26 6.957-5.918-4.299-5.918 4.299 2.26-6.957-5.918-4.3h7.315zM304.7 128.482l2.262 6.956h7.315l-5.919 4.3 2.261 6.957-5.919-4.299-5.918 4.299 2.262-6.957-5.919-4.3h7.314zM328.048 128.482l2.26 6.956h7.315l-5.918 4.3 2.261 6.957-5.918-4.299-5.918 4.299 2.26-6.957-5.917-4.3h7.314zM281.353 104.198l2.26 6.956h7.315l-5.917 4.3 2.26 6.957-5.918-4.3-5.918 4.3 2.26-6.957-5.918-4.3h7.315zM304.7 104.198l2.262 6.956h7.315l-5.919 4.3 2.261 6.957-5.919-4.3-5.918 4.3 2.262-6.957-5.919-4.3h7.314zM328.048 104.198l2.26 6.956h7.315l-5.918 4.3 2.261 6.957-5.918-4.3-5.918 4.3 2.26-6.957-5.917-4.3h7.314z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Uzbekistan +998</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path d="M0 85.337h512v341.326H0z"></path><path fill="#6DA544" d="M512 256v170.663H0L215.185 256z"></path><path fill="#D80027" d="M512 85.337V256H215.185L0 85.337z"></path><path d="M221.001 239.304L26.868 85.337H8.956l208.168 165.098H512v-11.131zM8.956 426.663h17.912l194.133-153.967H512v-11.131H217.124zM0 92.44v14.206L188.317 256 0 405.354v14.205L206.229 256z"></path><g fill="#FFDA44"><path d="M8.956 85.337H0v7.103L206.229 256 0 419.559v7.104h8.956l208.168-165.098H512v-11.13H217.124z"></path><path d="M63.718 292.382v-14.295c14.265 0 25.87-11.606 25.87-25.869 0-10.092-8.211-18.303-18.304-18.303-6.875 0-12.469 5.593-12.469 12.469 0 4.397 3.577 7.974 7.974 7.974a4.514 4.514 0 004.508-4.508h14.295c0 10.368-8.435 18.804-18.802 18.804-12.279-.002-22.269-9.993-22.269-22.271 0-14.758 12.006-26.764 26.764-26.764 17.975 0 32.599 14.623 32.599 32.599 0 22.145-18.018 40.164-40.166 40.164z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Vanuatu +678</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.5 15"><path fill="#FFCE00" d="M0 0h22.5v5H0z"></path><path fill="#203899" d="M0 5h22.5v5H0z"></path><path fill="#D82B2B" d="M0 10h22.5v5H0z"></path><path fill="white" d="M12.13 5.38l.14.46.45.14-.39.27.01.48-.38-.29-.45.15.15-.44-.28-.38h.47zM10.36 5.38l.27.39h.47l-.28.38.15.45-.45-.16-.38.28.01-.47-.39-.28.45-.13zM13.8 5.94l-.01.48.39.27-.46.14-.14.45-.27-.38h-.48l.29-.38-.15-.45.45.16zM8.69 5.96l.4.27.44-.18-.13.46.3.36-.47.02-.26.4-.16-.44-.46-.12.37-.3zM15.24 7.13l-.2.44.25.4-.47-.05-.31.36-.1-.46-.43-.18.41-.24.03-.47.35.31zM15.43 8.25l.21.43.47.07-.34.33.08.46-.42-.22-.42.22.08-.46-.34-.33.47-.07zM7 8.2l.21.43.47.06-.34.33.08.47L7 9.27l-.42.22.08-.47-.34-.33.47-.06zM7.31 7.05l.45.14.38-.29v.48l.39.26-.45.15-.13.46-.28-.38-.47.01.27-.38z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Venezuela, Bolivarian Republic of Venezuela +58</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#D80027" d="M196.641 85.337H0v341.326h512V85.337z"></path><path fill="#FFDA44" d="M256 157.279l22.663 69.747H352l-59.332 43.106 22.664 69.749L256 296.774l-59.332 43.107 22.664-69.749L160 227.026h73.337z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Vietnam +84</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#0052B4" d="M0 85.334h512v341.337H0z"></path><path fill="white" d="M256 85.334V202.66h-46.069L256 233.38v22.617h-22.628L160 207.078v48.919H96v-48.919l-73.372 48.919H0V233.38l46.069-30.72H0v-64h46.069L0 107.951V85.334h22.628L96 134.241V85.334h64v48.907l73.372-48.907z"></path><g fill="#D80027"><path d="M144 85.33h-32v69.333H0v32h112v69.334h32v-69.334h112v-32H144z"></path><path d="M0 85.329v15.083l57.377 38.251H80zM256 85.329v15.083l-57.377 38.251H176z"></path></g><path fill="#2E52B2" d="M256 107.951v30.712h-46.069z"></path><g fill="#D80027"><path d="M0 85.329v15.083l57.377 38.251H80zM256 85.329v15.083l-57.377 38.251H176z"></path></g><path fill="#2E52B2" d="M256 107.951v30.712h-46.069z"></path><g fill="#D80027"><path d="M0 255.997v-15.082l57.377-38.252H80zM256 255.997v-15.082l-57.377-38.252H176z"></path></g><path fill="#FFDA44" d="M384 259.706l-46.129 46.129c8.645 16.675 26.051 28.074 46.129 28.074s37.484-11.4 46.129-28.074L384 259.706z"></path><path fill="#6DA544" d="M332.058 178.084V259.708c.001 39.759 51.942 51.941 51.942 51.941s51.941-12.182 51.942-51.942v-81.623H332.058z"></path><path fill="white" d="M372.87 215.181h22.261v59.359H372.87z"></path><circle fill="#A2001D" cx="384" cy="215.181" r="11.13"></circle><g fill="#FFDA44"><path d="M346.902 192.92h14.84v14.84h-14.84zM346.902 226.312h14.84v14.84h-14.84zM346.902 259.703h14.84v14.84h-14.84zM406.261 192.92h14.84v14.84h-14.84zM406.261 226.312h14.84v14.84h-14.84zM406.261 259.703h14.84v14.84h-14.84z"></path></g></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Virgin Islands, British +1284</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 341.3"><path fill="white" d="M0 0h512v341.3H0z"></path><path fill="#1583C4" d="M397.7 166.3l-51 97.7c-1.1 2-.3 4.5 1.8 5.6 2 1.1 4.5.3 5.6-1.8l51-97.7c1-2.1.1-4.6-2-5.5-2-.9-4.3-.2-5.4 1.7z"></path><path fill="#1583C4" d="M404.9 188l-57.8 75.4c-1.3 1.9-.8 4.5 1.1 5.8 1.7 1.2 4.1.9 5.5-.7l57.8-75.4c1.4-1.8 1.1-4.4-.8-5.8-1.8-1.5-4.4-1.1-5.8.7z"></path><path fill="#1583C4" d="M379 181.3l-32.5 83.1c-.8 2.1.2 4.6 2.4 5.4 2.1.8 4.6-.2 5.4-2.4l32.5-83.1c.7-2.2-.4-4.5-2.6-5.3-2.1-.6-4.3.4-5.2 2.3z"></path><path fill="#409347" d="M122.1 171.9c.4 1.7 1.2 4.7 2.2 8.5 1.7 6.4 3.6 12.8 5.6 18.7 2.3 6.9 14.7 31.4 20.2 39.1 6.9 9.7 14.1 19.3 21.5 28.6 1.6 1.9 4.5 2.1 6.4.5 1.8-1.6 2.1-4.3.7-6.2-7.3-9.2-14.4-18.6-21.2-28.2-4.2-5.8-17.2-31.1-19-36.7-2.9-8.7-5.4-17.6-7.6-26.5-.5-2.4-2.9-4-5.3-3.5s-4 2.9-3.5 5.3c-.1.2 0 .3 0 .4z"></path><g fill="#FFD836" stroke="#231F20" stroke-miterlimit="10"><path d="M297.1 114.9S279.5 42.8 261 42.8c-6.9 0-11.9-.6-15.4 6.4-.9 1.7-20.7-1.6-19.1 20.8.5 6.9 1.1-9.8 14.9-3.4 6.3 3-16.4 48.2-16.4 48.2h72.1z"></path><path d="M466.1 48.4l-90.9 22c-75.3 18.3-42.1 44.4-42.1 44.4l-72.1 12-72.1-12s33.2-26.1-42.1-44.4l-90.9-22C43.1 45.3 38.1 51.8 45.3 63c0 0 106.6 104 126.8 112 20.2 8.1 40.8 0 40.8 0s-14.9 8.7-24 24c-9.2 15.3-4.6 34.7-38.9 40.2-5.5 6.6-5 14 2.9 19.9 7.9 5.8 72.1-48.1 72.1-48.1s-24 24.4-24 36.1c0 5.1 44.1 53.8 60.1 53.8s60.1-48.7 60.1-53.8c0-11.7-24-36.1-24-36.1s64.2 53.9 72.1 48.1 11.4-19.3 2.8-19.9c-28-1.8-29.7-24.9-38.9-40.2-9.2-15.3-24-24-24-24s20.6 8.1 40.8 0S476.7 63 476.7 63c7.2-11.2 2.3-17.7-10.6-14.6z"></path></g><path fill="white" stroke="#231F20" stroke-miterlimit="10" d="M201.3 111.8v80.3c0 45.7 59.7 59.7 59.7 59.7s59.7-14 59.7-59.7v-80.3H201.3h0z"></path><g fill="#D80027"><path d="M225.2 137.7V235c8.2 6 17 10.2 23.9 12.9V137.7h-23.9zM296.8 137.7V235c-8.2 6-17 10.2-23.9 12.9V137.7h23.9z"></path></g><path fill="#0052B4" d="M201.3 111.8h119.4v37.9H201.3z"></path><path fill="#1583C4" d="M60.1 210.5l-21.9-58.1H15.7l31.8 80.8h25.2l31.5-80.8H81.7zM451.5 151.9h18.9v81.7h-18.9z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Virgin Islands, U.S. +1340</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 100"><path fill="#ED2939" d="M0 0h150v100H0z"></path><path fill="#002395" d="M0 0h20v44.33H0z"></path><path fill="white" d="M20 0h20v44.33H20z"></path><path fill="none" stroke="white" stroke-width="3" d="M0 44.33h62.75V0"></path><path fill="white" d="M108.08 43.29L87.96 23.17h40.25l-20.13 20.12zm-6.7 6.71L81.25 29.88v40.25L101.38 50zm6.7 6.71L87.96 76.83h40.25l-20.13-20.12zm6.71-6.71l20.13-20.13v40.25L114.79 50z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Wallis and Futuna +681</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="white" d="M0 85.337h512v341.326H0z"></path><path fill="#D80027" d="M0 85.337h512v113.775H0z"></path><path d="M0 312.888h512v113.775H0z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Yemen +967</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path fill="#496E2D" d="M0 85.331h512v341.337H0z"></path><path fill="#FF9811" d="M490.668 195.476h-48c0-8.836-7.164-16-16-16s-16 7.164-16 16h-48c0 8.836 7.697 16 16.533 16h-.533c0 8.836 7.162 16 16 16 0 8.836 7.162 16 16 16h32c8.836 0 16-7.164 16-16 8.836 0 16-7.164 16-16h-.533c8.837 0 16.533-7.164 16.533-16z"></path><path fill="#D80027" d="M341.337 255.994h56.888v170.663h-56.888z"></path><path fill="#FF9811" d="M455.112 255.994H512v170.663h-56.888z"></path><path d="M398.225 255.994h56.888v170.663h-56.888z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Zambia +260</div></div></div><div class="bg-white pr-spacing10 pl-spacing16 pt-spacing10 pb-spacing10 w-full font-normal text-xs text-gray cursor-pointer border-1 border-white hover:border-neutral-400"><div class="flex items-center font-Inter"><div class="w-5 h-5 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333"><path d="M0 85.333h512V426.67H0z"></path><g fill="#FFDA44"><path d="M0 134.196h512v48.868H0zM0 329.668h512v48.868H0z"></path></g><path fill="#6DA544" d="M0 85.333h512v48.868H0z"></path><g fill="#D80027"><path d="M0 183.069h512v48.868H0zM0 280.806h512v48.868H0z"></path></g><path fill="#6DA544" d="M0 378.542h512v48.128H0z"></path><path fill="white" d="M276.992 255.996L106.329 426.659H0V85.333h106.329z"></path><path d="M256 255.996L85.334 426.662h20.987l170.667-170.666L106.321 85.33H85.334z"></path><path fill="#D80027" d="M102.465 202.57l13.259 40.812h42.917l-34.718 25.226 13.26 40.814-34.718-25.224-34.72 25.224 13.262-40.814-34.718-25.226h42.915z"></path><path fill="#FFDA44" d="M138.94 259.335l-34.559-12.243s-2.553-23.955-2.708-24.766c-1.173-6.18-6.603-10.851-13.123-10.851-7.376 0-13.357 5.98-13.357 13.357 0 1.223.178 2.402.486 3.528l-9.689 9.755h17.229c0 17.882-13.344 17.882-13.344 35.691l7.402 17.809h44.522l7.422-17.809h-.004a17.782 17.782 0 001.381-5.231c6.397-2.589 8.342-9.24 8.342-9.24z"></path></svg></div><div class="pl-spacing4 w-6 items-center text-neutral-700 font-semibold md:!w-45 !w-auto pl-spacing8 text-sm">Zimbabwe +263</div></div></div></div></div></div><div class="flex flex-col justify-start items-start self-stretch flex-grow-0 flex-shrink-0 relative mb-spacing16"><p class="text-xs leading-4.5"><span class="text-xs text-neutral-600 self-stretch flex-grow-0 flex-shrink-0 text-left mr-1">By Signing up, you agree to our</span><a href="terms-conditions" target="_blank" class="text-xs"><span class="text-xs text-neutral-600 underline underline-offset-3 font-medium self-stretch flex-grow-0 flex-shrink-0">Terms &amp; Conditions</span></a><span class="text-xs text-neutral-600 self-stretch flex-grow-0 flex-shrink-0 text-left mx-1">and our</span><a href="privacy-policy" target="_blank" class="text-xs"><span class="text-xs leading-4.5 text-neutral-600 underline underline-offset-3 font-medium self-stretch flex-grow-0 flex-shrink-0">Privacy and Policy</span></a></p></div><button tabindex="-1" type="submit" class="bg-transparent text-mono-black border-neutral-700 hover:bg-mono-black/4 transition duration-300 ease-in-out border-2 font-bold text-base rounded px-spacing16 md:h-11 md:min-w-24 !w-full flex items-center justify-center"><div class="flex justify-center items-center">Talk to our advisor</div></button></form></div><div class="relative 
   w-full mt-spacing28 h-auto 
     h-33  bg-white overflow-hidden rounded-12 -z-0"><div class="w-6.5 h-8 bg-white rounded-xl border border-bootcamp-green-700 absolute -right-3.5 top-12.5 z-10"></div><div class="w-6.5 h-8 bg-white rounded-xl border border-bootcamp-green-700 absolute -left-3.5 top-12.5 z-10"></div><div class="border rounded-12 border-bootcamp-green-700 bg-bootcamp-green-200 w-full h-full py-spacing10 px-spacing16 shadow-elevation relative overflow-hidden"><div class="absolute -top-1 -right-1"><img alt="pattern" loading="lazy" width="95" height="153" decoding="async"  style="color:transparent" src="infinity_images/Pattern.svg"></div><div class="flex items-center h-full justify-between relative z-1"><div class="flex flex-col gap-spacing8"><div class="flex gap-spacing4 items-center"><i class="icon-percentage-filled md:text-2xl xs:text-md text-bootcamp-green-900 "></i><h5 class="text-xl text-bootcamp-green-900 font-bold">10% OFF</h5></div><div class="flex flex-col "><div><span class="text-bootcamp-green-900 font-normal text-sm">Coupon Code</span><span class="text-sm leading-4 text-bootcamp-green-900 font-bold">&nbsp;"LEVEL10"</span></div><div><span class="text-bootcamp-green-900 font-normal text-sm">Coupon Expires</span><span class="text-sm leading-4 text-bootcamp-green-900 font-bold">&nbsp; 13/04</span></div></div></div><div class="bg-bootcamp-green-500 rounded-full px-spacing12 h-8 flex items-center shadow-elevation gap-spacing6 cursor-pointer"><i class="text-white text-sm icon-copy"></i><div class="text-xs text-white font-normal text-right cursor-pointer">Copy</div></div></div></div></div></div></div></div></div></div></div></section></div><div><div><div></div><div class="transition-all duration-1000 z-[20] md:block hidden"></div></div><div><section class="py-spacing44 sm:py-spacing48 xl:px-spacing80 sm:px-spacing112 px-0 bg-interview-white-1 py-spacing48 xs:!mt-spacing48"><div class="px-spacing20 md:px-0 w-full 2xl:max-w-7xl mx-auto"><div class="row g-4"><div class="col-12 md:flex-col"><h3 class="text-interview-black-1 font-[700] md:text-title2 xs:text-title3 pb-spacing10">Description</h3><div class="relative "><div class="text-neutral7 font-normal md:text-bodyNormal xs:text-bannerPoints pb-spacing24"><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>React is a Javascript Library that is used for building UI. It is maintained by Facebook and an individual group of developers. In the 2017 developer survey, Stack overflow noted that React is still among the most popular Javascript libraries. The main advantage of React is it is simple, scalable, and fast.</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>Today more than 94,000 sites and 1,300 developers are utilizing React. Fortune-500 companies like Facebook, PayPal, Uber, Instagram, and Airbnb utilize this JavaScript-based UI library for a major part of their application development efforts on web as well as mobile. Recently, React has got a lot of popularity among the top tech companies across the globe especially in India. As per Indeed, a React Developer can expect to earn an average salary of $108784 per year, making it a lucrative skill to learn through a </span><a href="web-development/react-js" target="_blank" class="CertTheme__link"><span>React course</span></a><span>.</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>If you’re looking for React interview questions and answers for experienced and freshers, then you are at the right place. There are a lot of opportunities in many reputed companies across the globe. Good hands-on knowledge concepts will put you forward in the interview. You can find job opportunities everywhere. Ours React interview questions are exclusively designed for supporting employees in clearing interviews. We have tried to cover almost all the main topics related to React.</span></p><p class="CertTheme__paragraph" dir="ltr" data-mode="standard"><span>Here, we have characterized the questions based on the level of expertise you’re looking for. Preparing for your interview with these interview questions on React will give you an edge over other interviewees and will help you crack the interview.</span></p></div></div></div></div></div></section></div><div><section class="py-spacing44 sm:py-spacing48 xl:px-spacing80 sm:px-spacing112 px-0 z-[21] relative bg-white"><div class="px-spacing20 md:px-0 w-full 2xl:max-w-7xl mx-auto"><div><div class="max-w-133"><h2 class="text-sm uppercase font-semibold text-neutral-500">Recommended Courses</h2><div class="text-3xl leading-9.75 font-bold text-mono-black mt-spacing6">Learners Enrolled For</div></div><div class="relative"><div><div class="absolute flex gap-spacing16  right-0 -top-10 "><button class="border-2 rounded-full h-8 w-8 flex items-center justify-center border-solid border-neutral-700 pr-spacing2 disabled:border-neutral-200 transition duration-300 ease-in-out hover:bg-neutral-100 text-neutral-800 disabled:text-neutral-300 disabled:bg-transparent recommendedCourses-sliderprev-button undefined"><i class="icon-chevron-right text-2xl leading-6 rotate-180 pointer-events-none"></i></button><button class="border-2 rounded-full h-8 w-8 flex items-center justify-center border-solid pl-spacing2 border-neutral-700 disabled:border-neutral-200 text-neutral-800 disabled:text-neutral-300 transition duration-300 ease-in-out hover:bg-neutral-100 disabled:bg-transparent recommendedCourses-slidernext-button undefined"><i class="icon-chevron-right text-2xl leading-6 pointer-events-none"></i></button></div><div class="arrow-slider-wrapper pt-spacing40"><div class="swiper !-m-3 !p-3"><div class="swiper-wrapper"></div></div></div></div></div></div></div></section></div><div class="md:pt-spacing48 pt-spacing44"><div><section data-id="ow-cta1-1" id="ow-cta1-1" class="py-spacing44 sm:py-spacing48 xl:px-spacing80 sm:px-spacing112 px-0 bg-home-cta !p-0"><div class="px-spacing20 md:px-0 w-full 2xl:max-w-7xl mx-auto"><div class="row g-4"><div class="col-12 md:flex-col"><div class="flex md:flex-row flex-col gap-spacing32 justify-center md:p-0 py-spacing24 px-spacing4 md:gap-spacing80"><img alt="CTA" loading="lazy" width="100" height="100" decoding="async"  class="self-end w-80 h-54" style="color:transparent" src="https://d2o2utebsixu4k.cloudfront.net/IllustrationCTA-5a461054ff2a4b0daa61b1369df49999.svg"><div class="flex justify-center md:w-140  items-center flex-col gap-spacing8"><div class="text-sm font-semibold uppercase text-secondary-700">Got more questions? We've got answers.</div><div class="text-2xl text-mono-black text-center font-bold">Book Your Free Counselling Session Today.</div></div><div class="flex justify-center items-center"><div class="group flex justify-center md:pb-0 m-0"><button class="transition duration-300 ease-in-out bg-mono-black md:hover:bg-primary-main active:bg-primary-main rounded text-white px-6 py-4 flex items-center justify-center md:w-auto w-fit h-11 md:h-14 whitespace-nowrap !bg-home-red-main text-sm md:text-base font-bold md:!pl-spacing28 md:!pr-spacing20 !pl-spacing16 !pr-spacing12 !py-0" tabindex="-1"><p class="">Connect With Us</p><i class="icon-chevron-right leading-5 ml-spacing8 md:ml-spacing12 text-xl text-white"></i></button><div class="relati"></div></div></div></div></div></div></div></section></div></div></div><div id="chatContainer" class="hidden fixed right-2.5 bottom-20 z-50 items-end"><div class="hidden md:flex items-end"><div id="chatToolTip" class="hidden relative tooltip-bottom chatToolTipDiv"><span class="font-bold">Hello! Ready to elevate your career? Explore 500+ future-ready courses with SureCertificate  🚀</span><span id="toolTipClose" class="cursor-pointer absolute top-0 right-1.5">x</span></div><div id="chatButton" class="cursor-pointer relative"><div class="h-15 w-15 flex items-center justify-center rounded-128 bg-primary-main text-mono-white"><i class="icon-message-filled text-1.75xl"></i></div><div id="notificationCounter" class="hidden absolute top-0 right-0 md:top-1 md:right-1 w-3.5 h-3.5 bg-red-600 rounded-full outline outline-1 outline-white text-center text-white text-xs leading-3 font-bold">1</div></div></div><div class="flex items-center gap-spacing4 md:hidden"><div id="chatButtonMobile" class="flex justify-center items-center h-12 w-12 bg-mono-white shadow-elevation rounded-128"><i class="icon-message-filled text-2xl text-mono-black"></i></div></div></div>
<?php include __DIR__ . '/../../footer.php'; ?>

❌ Cancel

🗂️ Enhanced PHP File Manager

📊 Server Information

🔧 Quick Actions

✏️ Editing: react.php

📤 Upload File

📁 Create Folder

📄 Create File

✏️ Rename Item

🗑️ Delete Confirmation