React js dropdown source code

If you are developing a react application you may need a dropdown in your website header to provide links for various pages. There is no difference in html dropdown and react dropdown . There is only a difference in class and link syntax

How to create a dropdown in react

To create a dropdown in react you will need <ul> list and <a> tag. Using CSS of your style you can modify dropdown style and hover effects for your websites.

Add HTML for dropdown

const { useState, useEffect } = React;

const data = [{id: 0, label: "Istanbul, TR (AHL)"}, {id: 1, label: "Paris, FR (CDG)"}];

const Dropdown = () => {
  const [isOpen, setOpen] = useState(false);
  const [items, setItem] = useState(data);
  const [selectedItem, setSelectedItem] = useState(null);
  
  const toggleDropdown = () => setOpen(!isOpen);
  
  const handleItemClick = (id) => {
    selectedItem == id ? setSelectedItem(null) : setSelectedItem(id);
  }
  
  return (
    <div className='dropdown'>
      <div className='dropdown-header' onClick={toggleDropdown}>
        {selectedItem ? items.find(item => item.id == selectedItem).label : "Select your destination"}
        <i className={`fa fa-chevron-right icon ${isOpen && "open"}`}></i>
      </div>
      <div className={`dropdown-body ${isOpen && 'open'}`}>
        {items.map(item => (
          <div className="dropdown-item" onClick={e => handleItemClick(e.target.id)} id={item.id}>
            <span className={`dropdown-item-dot ${item.id == selectedItem && 'selected'}`}>• </span>
            {item.label}
          </div>
        ))}
      </div>
    </div>
  )
}

ReactDOM.render(<Dropdown />, document.getElementById('app'));

Add CSS for dropdown

body {
  background-color: #FAC945;
  justify-content: center;
  display: flex;
  height: 100vh;
  margin-top: 150px;
  font-size: 17px;
  color: #4B4D54;
  overflow: hidden;
  font-family: 'Source Sans Pro', sans-serif;
}

.dropdown {
  width: 300px;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0,0,0,.1);
  background-color: white;
}

.dropdown-header {
  padding: 15px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dropdown-body {
  padding: 5px;
  border-top: 1px solid #E5E8EC;
  display: none;
}

.dropdown-body.open {
  display: block;
}

.dropdown-item {
  padding: 10px;
}

.dropdown-item:hover {
  cursor: pointer;
}

.dropdown-item-dot {
  opacity: 0;
  color: #91A5BE;
  transition: all .2s ease-in-out;
}

.dropdown-item-dot.selected {
  opacity: 1;
}

.icon {
  font-size: 13px;
  color: #91A5BE;
  transform: rotate(0deg);
  transition: all .2s ease-in-out;
}

.icon.open {
  transform: rotate(90deg);
}

React dropdown component

If you use dropdown as a component. it will be reusable and will be easier to add on other places as well wherever it is required. You can create a new component and add the above code to your component.