In this post, we will discuss how to build a dropdown component in React. We will also add an animation to our dropdown.

There are many approaches you can take when adding a component to your application, there is an abundance of component libraries you can use such as 

material-ui but sometimes it is better to just get your hands dirty

In this post, we are going to do exactly that and build our own dropdown component.

A dropdown is a staple in any web application and is most commonly used in menus to display a list of options to the user.  A dropdown can also be used to display some information to the user that can be shown on a button click.  They are used all across the web and you could also be asked to build one in your next interview!

I know that building a component such as a dropdown may seem intimidating, but in this post, we will take it step by step so you can follow along.  The knowledge gained from this post will also help you build any custom components! 

By the end of this post, you will be able to:

Armed with the above knowledge, you will have a newfound confidence when approaching building components in React.

To get the most out of this article, we assume you're familiar with component basics in React, React Hooks, and also core JavaScript.  

If you do not know any of the above but would like to learn, here are some great resources:

Now it's time to get started on our journey of building our very own dropdown component.

Before building our dropdown component, it is important to discuss the different parts of a dropdown.

There are four key components to a menu dropdown:

The component structure could look like this:

The above is just theory, you can be as creative as you want when building your own component.  When building custom components, it is really important to build the component to suit your use case as it may be quite different from the standard.  It's good to use the best practice guidelines but also don't be afraid to be creative!

Let's first start with a very basic dropdown, we will click on a button that will show a pop up that tells the user something.

When building a basic dropdown component, there is one important piece of state.  The important piece of state is whether the dropdown is open or not.  We will also need to add a function to handle toggling this piece of state.  

This will all live in our wrapper component, which in our case is 

 to manage the showing and hiding of the dropdown for us (check out the docs here for 

const [showDropdown, setShowDropdown] = useState(false);

<BasicDropdown
  showDropdown={showDropdown}
  setShowDropdown={() => setShowDropdown(!showDropdown)}
 />

 component.  The main thing we need is something to trigger our dropdown and also the content of our dropdown.

const BasicDropdown = ({
  showDropdown,
  setShowDropdown,
}) => {
  return (
    <div class="dropdown-wrapper">
      <button
        onClick={setShowDropdown}
        className="trigger-button"
      >
        Trigger Dropdown
      </button>
      {showDropdown && (
        <div class="dropdown">
          Hey I am the dropdown
        </div>
      )}
    </div>
  );
};

 to trigger the dropdown and then we only show our content when 

 is true.  There is a little CSS with this too, the key part of the CSS is setting 

.dropdown-wrapper {
  position: relative;
  width: 200px;
}

.dropdown-wrapper .dropdown {
  background: #fff;
  width: 200px;
  height: 100px;
  position: absolute;
  top: 50px;
  left: 0;
  font-family: "Open Sans";
  font-size: 22px;
  display: flex;
  align-items: center;
}


This is a very basic dropdown but still is very commonly used when displaying some information to a user.  

You could reuse this in various places and even expand it by opening it up to additional props such as a custom color or custom text.

Why not try to add those additional props to the Codesandbox below, this will help further your knowledge of building custom components and making them reusable.

So we can use a lot of the knowledge we gained above to help build our dynamic dropdown.  The big difference with this dropdown is that it will accept a 

 and it will also have a transition when it is being open/closed.  The 

 prop will determine when it is rendered within our dropdown list.  This could literally be anything. A very common scenario is sub-items for a navigation menu.

In our case we are going to make up some items:

const items = [
  "banana", 
  "apple", 
  "orange", 
  "pear", 
  "grape", 
  "berry"
];

We can then pass this into our dropdown component:

<BasicDropdown
  showDropdown={showDropdown}
  setShowDropdown={() => setShowDropdown(!showDropdown)}
  items={items}
/>

Our dropdown component will behave quite similar to the one before, except we will map over each item in our array and create an 

const BasicDropdown = ({ ..., items }) => {
  return (
    ....
      <ul className={showDropdown ? "active" : ""}>
        {items.map((item) => (
          <li>{item}</li>
        ))}
      </ul>
   ....
  );
};

To achieve this, we will use the following CSS (nothing too fancy going on, mostly overriding default browser styles):

ul {
  background: #fff;
  color: #000000;
  list-style: none;
  margin: 0;
  font-size: 18px;
  overflow: hidden;
  height: 0px;
  transition: height 0.3s ease;
  padding: 0;
}

ul.active {
  height: 100px;
  overflow: auto;
}

As you can see from above, we have set a 

 property. In simple cases where only one attribute is changing in a predictable manner, we can use 

. As we get a lot of items being passed to our list, we can then scroll our dropdown to suit this.

If you're interested in learning further, try to build your own components.  There are some great long-form articles you can read on building your own components such as 

.  Personally, I would say that if you have read all the above then you should just open your own Codesandbox and start building components such as an Alert or a Modal. This is truly the best way to learn!

<h1 data-node-type="titlePlaceholder" class="titlePlaceholder">Quick &amp; Easy React Dropdown Component</h1><div data-node-type="summary" class="summary-block">In this post, we will discuss how to build a dropdown component in React. We will also add an animation to our dropdown.</div><p>There are many approaches you can take when adding a component to your application, there is an abundance of component libraries you can use such as <a href="https://material-ui.com/" rel="noopener noreferrer nofollow">material-ui but sometimes it is better to just get your hands dirty</a> and build your own one!  </p><p>In this post, we are going to do exactly that and build our own dropdown component.</p><p>A dropdown is a staple in any web application and is most commonly used in menus to display a list of options to the user.  A dropdown can also be used to display some information to the user that can be shown on a button click.  They are used all across the web and you could also be asked to build one in your next interview!</p><p>I know that building a component such as a dropdown may seem intimidating, but in this post, we will take it step by step so you can follow along.  The knowledge gained from this post will also help you build any custom components! </p><p>Ready? Let's go!</p><h2><a name="what-will-you-learn?">What will you learn?</a></h2><p>By the end of this post, you will be able to:</p><ul><li><p>Build a functional component from scratch</p></li><li><p>Understand the anatomy of a dropdown</p></li><li><p>Build your own dropdown component</p></li><li><p>Add animation to our component</p></li></ul><p>Armed with the above knowledge, you will have a newfound confidence when approaching building components in React.</p><h2><a name="what-do-you-need-to-know?">What do you need to know?</a></h2><p>To get the most out of this article, we assume you're familiar with component basics in React, React Hooks, and also core JavaScript.  </p><p>If you do not know any of the above but would like to learn, here are some great resources:</p><ul><li><p><a href="https://www.freecodecamp.org/learn" rel="noopener noreferrer nofollow">freecodecamp </a>is a great free resource that will help you become an expert at JavaScript</p></li><li><p>The <a href="https://reactjs.org/docs/getting-started.html" rel="noopener noreferrer nofollow">React </a>docs are great for getting started with react but to become an expert I recommend <a href="https://www.newline.co/fullstack-react/" rel="noopener noreferrer nofollow">fullstack react</a></p></li></ul><p>Now it's time to get started on our journey of building our very own dropdown component.</p><h2><a name="the-anatomy-of-a-dropdown">The anatomy of a dropdown</a></h2><p>Before building our dropdown component, it is important to discuss the different parts of a dropdown.</p><p>There are four key components to a menu dropdown:</p><ul><li><p>Heading/Wrapper</p><ul><li><p>Wrapper around our heading</p></li></ul></li><li><p>Title</p><ul><li><p>This could be a button or an item in a navigation bar (normally will trigger the dropdown)</p></li></ul></li><li><p>List</p><ul><li><p>Wrapper around all of our items</p></li></ul></li><li><p>List items</p><ul><li><p>An item in our list</p></li></ul></li></ul><p>Visually, we can imagine it like this:</p><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20200823114055698_Screenshot%202020-08-23%20at%2012.40.38.png" attachmentid="4f1c091b-4c7b-492a-bda6-0db290909a2d" contenteditable="false" data-width="618" data-height="602"><div></div></figure><p></p><p>The component structure could look like this:</p><textarea data-iscodemirror="true" data-mode="text/html" data-uniqueid="cm-3tNFw" id="cm-3tNFw">&lt;Wrapper&gt;
  &lt;Heading /&gt;
  &lt;List&gt;
    &lt;Item /&gt;
    &lt;Item /&gt;
    &lt;Item /&gt;
    &lt;Item /&gt;
  &lt;/List&gt;
&lt;/Wrapper&gt;</textarea><p>The core functionality would be:</p><ul><li><p>Clicking on the heading will toggle the list (show or hide)</p></li><li><p>Populate the list with items passed into the component</p></li><li><p>Clicking the heading again will close the list (sometimes clicking outside the list will also close the component)</p></li></ul><p>The above is just theory, you can be as creative as you want when building your own component.  When building custom components, it is really important to build the component to suit your use case as it may be quite different from the standard.  It's good to use the best practice guidelines but also don't be afraid to be creative!</p><h2><a name="basic-dropdown-component">Basic Dropdown Component</a></h2><p>Let's first start with a very basic dropdown, we will click on a button that will show a pop up that tells the user something.</p><p>When building a basic dropdown component, there is one important piece of state.  The important piece of state is whether the dropdown is open or not.  We will also need to add a function to handle toggling this piece of state.  </p><p>This will all live in our wrapper component, which in our case is <code>App</code>.  We can use <code>useState</code> to manage the showing and hiding of the dropdown for us (check out the docs here for <a href="https://reactjs.org/docs/hooks-intro.html" rel="noopener noreferrer nofollow">React hooks</a>).</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-ZwvZE" id="cm-ZwvZE">const [showDropdown, setShowDropdown] = useState(false);</textarea><p>We will pass both <code>showDropdown</code> and <code>setShowdropdown</code> as props to our component.</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-hUce3" id="cm-hUce3">&lt;BasicDropdown
  showDropdown={showDropdown}
  setShowDropdown={() =&gt; setShowDropdown(!showDropdown)}
 /&gt;</textarea><p>Now we need to build our <code>BasicDropdown</code> component.  The main thing we need is something to trigger our dropdown and also the content of our dropdown.</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-hb6Og" id="cm-hb6Og">const BasicDropdown = ({
  showDropdown,
  setShowDropdown,
}) =&gt; {
  return (
    &lt;div class="dropdown-wrapper"&gt;
      &lt;button
        onClick={setShowDropdown}
        className="trigger-button"
      &gt;
        Trigger Dropdown
      &lt;/button&gt;
      {showDropdown &amp;&amp; (
        &lt;div class="dropdown"&gt;
          Hey I am the dropdown
        &lt;/div&gt;
      )}
    &lt;/div&gt;
  );
};</textarea><p>We are using a <code>button</code> to trigger the dropdown and then we only show our content when <code>showDropdown</code> is true.  There is a little CSS with this too, the key part of the CSS is setting <code>position:relative</code> on the <code>dropdown-wrapper</code> and <code>position:absolute</code> on the <code>dropdown</code>.  We do this so that the <code>dropdown</code> will always be positioned to the the <code>dropdown-wrapper</code>.</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-VMlsx" id="cm-VMlsx">.dropdown-wrapper {
  position: relative;
  width: 200px;
}

.dropdown-wrapper .dropdown {
  background: #fff;
  width: 200px;
  height: 100px;
  position: absolute;
  top: 50px;
  left: 0;
  font-family: "Open Sans";
  font-size: 22px;
  display: flex;
  align-items: center;
}
</textarea><p>Visually, we now have:</p><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20200828185225420_Screenshot%202020-08-28%20at%2019.51.51.png" attachmentid="bbb837f7-6607-40b2-8c7f-718a6f283e6f" contenteditable="false" data-width="442" data-height="330"><div></div></figure><p></p><p>That is it, not too bad, eh?</p><p>This is a very basic dropdown but still is very commonly used when displaying some information to a user.  </p><p>You could reuse this in various places and even expand it by opening it up to additional props such as a custom color or custom text.</p><p>Why not try to add those additional props to the Codesandbox below, this will help further your knowledge of building custom components and making them reusable.</p><div data-embed="true" contenteditable="false" class="embeddedIframeWrapper embed-container editing embed-position-inline"><iframe src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodesandbox.io%2Fembed%2Ft4uon&amp;display_name=CodeSandbox&amp;url=https%3A%2F%2Fcodesandbox.io%2Fs%2Ft4uon&amp;image=https%3A%2F%2Fcodesandbox.io%2Fapi%2Fv1%2Fsandboxes%2Ft4uon%2Fscreenshot.png&amp;key=c4a3d56b91fa4b36945f1953875308ab&amp;type=text%2Fhtml&amp;schema=codesandbox" frameborder="0" sandbox="allow-scripts allow-forms allow-same-origin"></iframe></div><h2><a name="dynamic-dropdown-menu">Dynamic Dropdown menu</a></h2><p>So we can use a lot of the knowledge we gained above to help build our dynamic dropdown.  The big difference with this dropdown is that it will accept a <code>prop</code> named <code>items</code> and it will also have a transition when it is being open/closed.  The <code>items</code> prop will determine when it is rendered within our dropdown list.  This could literally be anything. A very common scenario is sub-items for a navigation menu.</p><p>In our case we are going to make up some items:</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-zacS7" id="cm-zacS7">const items = [
  "banana", 
  "apple", 
  "orange", 
  "pear", 
  "grape", 
  "berry"
];</textarea><p>We can then pass this into our dropdown component:</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-mxXuz" id="cm-mxXuz">&lt;BasicDropdown
  showDropdown={showDropdown}
  setShowDropdown={() =&gt; setShowDropdown(!showDropdown)}
  items={items}
/&gt;</textarea><p>Our dropdown component will behave quite similar to the one before, except we will map over each item in our array and create an <code>li</code> item.</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-TvPfl" id="cm-TvPfl">const BasicDropdown = ({ ..., items }) =&gt; {
  return (
    ....
      &lt;ul className={showDropdown ? "active" : ""}&gt;
        {items.map((item) =&gt; (
          &lt;li&gt;{item}&lt;/li&gt;
        ))}
      &lt;/ul&gt;
   ....
  );
};</textarea><p>We will initially set our <code>ul</code> to have <code>height</code>  <code>0</code> so that it is hidden. When <code>showDropdown</code> is <code>true,</code> we will set the <code>height</code> to <code>100px</code> which will make it visible.</p><p>To achieve this, we will use the following CSS (nothing too fancy going on, mostly overriding default browser styles):</p><textarea data-iscodemirror="true" data-mode="text/css" data-uniqueid="cm-K96Nu" id="cm-K96Nu">ul {
  background: #fff;
  color: #000000;
  list-style: none;
  margin: 0;
  font-size: 18px;
  overflow: hidden;
  height: 0px;
  transition: height 0.3s ease;
  padding: 0;
}

ul.active {
  height: 100px;
  overflow: auto;
}</textarea><p>As you can see from above, we have set a <code>transition</code> on our <code>height</code> so that when the <code>height</code> changes it will do it with an <code>ease</code> transition which will last <code>300ms</code>. You don't need to always use the <code>animation</code> property. In simple cases where only one attribute is changing in a predictable manner, we can use <code>transition</code>.</p><p>Visually, we now have this:</p><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20200901191851337_menu.gif" attachmentid="bceda3f1-daf6-4463-829c-c701b8d29074" contenteditable="false" data-width="492" data-height="318"><div></div></figure><p>One important part to note is the <code>overflow:auto</code>. As we get a lot of items being passed to our list, we can then scroll our dropdown to suit this.</p><p>Complete sandbox.</p><div data-embed="true" contenteditable="false" class="embeddedIframeWrapper embed-container editing embed-position-inline"><iframe src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodesandbox.io%2Fembed%2F94sc6&amp;display_name=CodeSandbox&amp;url=https%3A%2F%2Fcodesandbox.io%2Fs%2F94sc6&amp;image=https%3A%2F%2Fcodesandbox.io%2Fapi%2Fv1%2Fsandboxes%2F94sc6%2Fscreenshot.png&amp;key=c4a3d56b91fa4b36945f1953875308ab&amp;type=text%2Fhtml&amp;schema=codesandbox" frameborder="0" sandbox="allow-scripts allow-forms allow-same-origin"></iframe></div><h2><a name="conclusion">Conclusion</a></h2><p>Today we learned:</p><ul><li><p>How to build a functional component from scratch</p></li><li><p>The anatomy of a dropdown</p></li><li><p>How to build your own dropdown component</p></li><li><p>How to add an animation to a component</p></li></ul><p>If you're interested in learning further, try to build your own components.  There are some great long-form articles you can read on building your own components such as <a href="https://www.digitalocean.com/community/tutorials/how-to-create-custom-components-in-react" rel="noopener noreferrer nofollow">this one</a>.  Personally, I would say that if you have read all the above then you should just open your own Codesandbox and start building components such as an Alert or a Modal. This is truly the best way to learn!</p><p>Have a great day and happy coding.</p><p></p><p></p>

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Quick & Easy React Dropdown Component

Tags

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript