React Dropdown with Images | Select Image

Do you want to add some flair to your React dropdown components by using images instead of plain text? Whether you need to display country flags, product icons, or user avatars, you can use React dropdown with images to create stunning and user-friendly select components. In this article, you will learn how to use different libraries and techniques to implement React select with image, React image dropdown, and React select image components. You will also learn how to customize the appearance and behavior of your image select components to suit your needs.

written

reviewed

updated

How to Add Image in Dropdown Option in React Js?

This React.js code snippet creates a dropdown component with images and labels. When clicked, it displays a list of options, each accompanied by an image and a label. The currently selected option is shown as the main button content. Clicking on an option updates the selected value and closes the dropdown.

The component utilizes the React state to manage the open/closed state of the dropdown and the selected option. It maps through an array of options, associating each option with an image and a label. The dropdown appearance and behavior are controlled using CSS classes and event handlers. The selected option’s label and image are displayed within the dropdown button.

React Select Add Image to Options

  <script type="text/babel">
    const { useState } = React;
    const options = [
      { label: 'John Andrew', image: 'https://www.sarkarinaukriexams.com/images/editor/1691754246bird-g8b2ad9bcc_640.jpg' },
      { label: 'Mr. Bob', image: 'https://www.sarkarinaukriexams.com/images/editor/1691754273bird-gda5461bb5_640.jpg' },
      { label: 'Jimmy Charlie', image: 'https://www.sarkarinaukriexams.com/images/editor/1691754293lily-g661b596df_640.jpg' },
      { label: 'David', image: 'https://www.sarkarinaukriexams.com/images/editor/1691754318flower-gf39467e8f_640.jpg' },
      { label: 'Emily', image: 'https://www.sarkarinaukriexams.com/images/editor/1691754338influencer-g28b2a2f55_640.jpg' },
      { label: 'Frank', image: 'https://www.sarkarinaukriexams.com/images/post/1683451563Vue_Js_Open_link_in_new_tab.jpg' },
    ];

    const App = () => {
      const [isDropdownOpen, setIsDropdownOpen] = useState(false);
      const [selectedOption, setSelectedOption] = useState(null);

      const toggleDropdown = () => {
        setIsDropdownOpen(!isDropdownOpen);
      };

      const selectOption = (option) => {
        setSelectedOption(option);
        setIsDropdownOpen(false);
      };

      return (
        <div className='container'>
          <h3>React Js Dropdown with Image</h3>
          <p>Selected Value: {selectedOption ? selectedOption.label : ''}</p>
          <div className="dropdown">
            <div className="dropdown-toggle" onClick={toggleDropdown}>
              {selectedOption && (
                <img src={selectedOption.image} alt={selectedOption.label} className="dropdown-option-image" />
              )}
              <span className="dropdown-option-label">
                {selectedOption ? selectedOption.label : 'Select an option'}
              </span>
              <span className="dropdown-caret"></span>
            </div>
            <ul className={`dropdown-menu ${isDropdownOpen ? 'open' : ''}`}>
              {options.map((option, index) => (
                <li key={index} onClick={() => selectOption(option)}>
                  <img src={option.image} alt={option.label} className="dropdown-option-image" />
                  <span className="dropdown-option-label">{option.label}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      );
    };

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

Run

React JS Tutorial

React Dropdown with Images | Select Image

How to Add Image in Dropdown Option in React Js?

React Select Add Image to Options

Output of Displaying an Image when Selecting an option from a Drop Down List

React JS Tutorial

React Dropdown with Images | Select Image

Feedback for Abhishek

How to Add Image in Dropdown Option in React Js?

React Select Add Image to Options

Output of Displaying an Image when Selecting an option from a Drop Down List