What is the best way to implement a dropdown in MUI and React that displays functional components as items?

Here is a list of dummy components:

const OwnerList = () => {
  return (
    <Box
      sx={{
        display: 'flex',
      }}
      className="owner-container"
    >
      <Avatar src='https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/actor-robert-pattinson-attends-the-opening-ceremony-of-the-news-photo-1588147075.jpg?crop=1.00xw:0.669xh;0,0.0920xh&resize=480:*' sx={{ width: 70, height: 70 }}>
      </Avatar>
      <Box
        className='testz'
      >
        <Typography sx={{ fontSize: 14 }}>
          Robert Douglas Thomas Pattinson
        </Typography>
      </Box>
      <Box className='owner-iconbutton-container'>
        <IconButton className='owner-iconbutton' size="large">
          <SwapVertIcon />
        </IconButton>
      </Box>
    </Box>
  )
}

export const OwnerListDropdown = () => {
  return (
    <Box sx={{ minWidth: 120 }}>
      <FormControl fullWidth>
        <InputLabel variant="standard" htmlFor="uncontrolled-native">
          User
        </InputLabel>
        <NativeSelect
          defaultValue={30}
          inputProps={{
            name: 'User',
            id: 'uncontrolled-native',
          }}
        >
          <option value={10}><OwnerList /></option>
          <option value={20}><OwnerList /></option>
          <option value={30}><OwnerList /></option>
        </NativeSelect>
      </FormControl>
    </Box>
  )
}

I want to create a dropdown with card items for the user to select from, but I'm struggling to achieve this with my current method. When the is called, it only displays an image like this:

https://i.sstatic.net/dUwrQ.png

Is there a way to create a customized dropdown that functions as intended?

javascriptcssreactjsmaterial-ui

Answer №1

To solve the issue, utilize @mui/material/Select in place of @mui/material/NativeSelect with the following code:

import * as React from "react";
import Box from "@mui/material/Box";
import InputLabel from "@mui/material/InputLabel";
import FormControl from "@mui/material/FormControl";
import Select from "@mui/material/Select";
import { Typography } from "@mui/material";
import SwapVertIcon from "@mui/icons-material/SwapVert";
import Avatar from "@mui/material/Avatar";
import IconButton from "@mui/material/IconButton";
import MenuItem from "@mui/material/MenuItem";

const OwnerList = ({ value }) => {
  return (
    <Box
      sx={{
        display: "flex"
      }}
      className="owner-container"
    >
      <Avatar
       src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/actor-robert-pattinson-attends-the-opening-ceremony-of-the-news-photo-1588147075.jpg?crop=1.00xw:0.669xh;0,0.0920xh&resize=480:*"
       sx={{ width: 70, height: 70 }}
     ></Avatar>
     <Box className="testz">
       <Typography sx={{ fontSize: 14 }}>
         Robert Douglas Thomas Pattinson {value}
       </Typography>
     </Box>
     <Box className="owner-iconbutton-container">
       <IconButton className="owner-iconbutton" size="large">
         <SwapVertIcon />
       </IconButton>
     </Box>
   </Box>
  );
};

const OwnerListDropdown = () => {
  return (
    <Box sx={{ minWidth: 120 }}>
      <FormControl fullWidth>
        <InputLabel variant="standard" htmlFor="uncontrolled-native">
          User
        </InputLabel>
        <Select
          defaultValue={30}
          inputProps={{
            name: "User",
            id: "uncontrolled-native"
          }}
        >
          <MenuItem value={10}>
           <OwnerList value={10} />
          </MenuItem>
          <MenuItem value={20}>
           <OwnerList value={20} />
          </MenuItem>
          <MenuItem value={30}>
           <OwnerList value={30} />
          </MenuItem>
        </Select>
      </FormControl>
    </Box>
  );
};

export default OwnerListDropdown;

For a practical demonstration of this resolution, visit this sandbox.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Avoid the use of specific NodeJS libraries when implementing ReactJS applications

In the development of my single page application using ReactJS and MaterialUI, I have encountered a problem where some components do not align with the documentation provided by MaterialUI. Upon investigation, it appears that these component styles are bei ...

reactjsmaterial-uicrafter-cms

Various web browsers may exhibit varying behaviors when processing extremely lengthy hyperlinks

I am curious to understand why browsers handle long URLs differently based on how they are accessed. Let me explain further: Within my application, there is a link to a specific view that may have a URL exceeding 2000 characters in length. I am aware that ...

javascripturlbrowsernext.js

The session in Express.js is not retained across different domains

I am currently developing a third-party application that will be utilized across multiple domains. My main goal is to manage a session per user who uses the app, which led me to implement the express-session module for this purpose. However, I encountered ...

javascriptnode.jsexpressexpress-session

Tips for personalizing the streamlit expander widget

After diving into the streamlit components documentation, it became clear that rendering HTML code for the label parameter of the st.expander() function is not supported. Is there a way to work around this limitation? My exact requirement is as follows: ...

htmlcssstreamlit

Is it advantageous to employ several wrapper-divs inside section elements when working with HTML5 and CSS?

Back in the day, I learned how to create a website by enclosing all content below the body tag within a div with the class "wrapper." This approach made sense as it allowed for easy vertical and horizontal alignment of the entire content. Just yesterday, ...

htmlcss

Differences in tabstrip appearance between FireFox on Mac and Ubuntu compared to FireFox on PC

I've encountered an issue with my simple css tabstrip. It seems to render correctly in: Safari 5.0.2 on Mac IE8 on PC FireFox 3.8.12 on PC However, when viewed on FireFox 3.8.12 on Mac and Ubuntu, the tabs overlap the bottom border of the containe ...

cssfirefoxplatform-specific

Inconsistent behavior of transform scale() between Chrome and Safari upon page refresh

My goal was to design a code that would adjust all content according to the browser size, ensuring that everything remains visible even when the window is resized. var docHeight = $(document).height(); var winHeight; var zoomRatio; function z(number) { ...

javascriptjquerycsscss-transformswebkit-transform

Error: Conditional formatting not compatible with JavaScript detected

I have a jQuery DataTable that is populated with data from a JSON file. Everything works smoothly, but I'm encountering an issue with conditional formatting. The script I'm using assigns a 'positive' class to all cells in column 2, even ...

javascriptjqueryjsondatatables

Finding and removing a specific CSS pattern from a webpage that has been loaded

Encountered a troublesome Amazon.com page that appears blank in print preview, specifically the Online Return Center\Your Return Summary page. After much troubleshooting on a locally saved copy of the webpage, I pinpointed the issue to a problematic l ...

cssdeveloper-tools

Setting the dispatch type in Redux using Typescript

I'm new to typescript and I'm trying to figure out what type should be assigned to the dispatch function. Currently, I am using 'any', but is there a way to map all actions to it? Here's how my code looks like: interface PropType ...

reactjstypescriptreduxreact-redux

reactjs tutorial: integrating checkbox and text input for dynamic form creation

In my venture into Reactjs, I am attempting to construct a unique UI component that integrates a checkbox with an attached text input. The purpose of this combination is to allow the user to modify the text input only when the checkbox is checked; otherwis ...

user-interfacereactjsuicomponents

Function starting too slow due to rapid Loading Spinner Image display

I am struggling with a function that is supposed to display the contents of posts when clicked on. My goal is to have a loading spinner appear for a few seconds before the post content shows up. However, I am facing an issue where the spinner only appears ...

javascriptajaxjquery

conversion of text to number using JavaScript

After pulling values from an XML file using JavaScript, I face the challenge of converting a string to an integer in order to perform calculations. To extract data from the XML file, I use the following snippet: var pop = JSON.stringify(feature.attribute ...

javascript

Could someone explain why the window.onload function is not functioning as expected on my other Vue page?

I am facing an issue with my two pages or "views" that have identical JS code. Both pages have a window.onload function where I perform some actions: console.log("loading") window.onload = function() { console.log("loaded") // do stuff } The problem is t ...

javascriptvue.jsvue-router

How to utilize variables in Angular module functions?

My experience with Angular is fairly new, and I recently encountered a debugging issue in my application that unfolded like this: Imagine I am adding a new directive to an existing module defined in another .js file. When I tried using the syntax below: ...

javascriptangularjs

Utilize Reactjs and Firebase to transform a string into a map structure

I am facing an issue with my reactjs app where I have a "steps" array for users to input recipe preparation steps. Currently, the steps are stored as strings directly in the array on Firebase. However, I want them to be structured within a map. Can someone ...

reactjsfirebase

Execute a specific function when the Node.js countdown reaches zero

I am currently working on a web application and I need to incorporate a new function. This function will display a table containing certain results when a user submits a request. If the user does not submit anything, it will show different results as tim ...

javascriptnode.jsmongooseejs

The jQuery AJAX function executing twice upon click

I've encountered an issue while attempting to make two Ajax calls on a single page using jQuery. The first Ajax call executes successfully and generates the desired results. However, the second Ajax call is meant to be triggered by clicking a button b ...

javascriptjqueryajax

When zooming out, Leaflet displays both tile layers

I'm currently working on integrating two tile layers along with a control for toggling between them. Below is the code snippet I am using: const layer1: L.TileLayer = L.tileLayer('http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png', { ...

javascripttypescriptleaflet

Best practice for integrating configuration settings into a Redux application

One essential step before launching my application is to read the config.json file. This file contains the URLs to my backend services, which will be utilized in my Redux action creators. I have contemplated two different approaches: Fetching the JSON a ...

javascriptreactjswebpackredux