Include a picture and a division element within the dropdown element

I've encountered a few challenges while trying to personalize a profile dropdown component using Semantic and React. First, I am facing an issue where my application crashes when I attempt to place a div inside the Dropdown.Menu with the error message below. Secondly, I'm uncertain how to specify a custom width for the dropdown itself. Currently, the dropdown only appears when I hover over it, but I want it to show up when hovering over both the image and the dropdown component. My goal is to achieve something similar to this image: puu.sh/tM6Ly/690a02bd46.png, possibly by replacing the dropdown arrow with the image.

<Dropdown simple={true} text="dropdown">
 <Dropdown.Menu>
   <Dropdown.Item>Profile 1</Dropdown.Item>
   <Dropdown.Item>Profile 2</Dropdown.Item>
   <Dropdown.Item>Profile 3</Dropdown.Item>
   <Dropdown.Item>Profile 4</Dropdown.Item>
 </Dropdown.Menu>
 <div>
   <img src="linkhidden"/>
 </div>
 </Dropdown>

The following code snippet triggers the error 

onlyChild must be passed a children with exactly one child.
along with Invalid propchildrensupplied toDropdown
, expected a single ReactElement.

cssreactjsdrop-down-menusemantic-ui

Answer №1

When using the Dropdown component in React, you have the option to customize the default arrow icon by setting the icon prop with your desired replacement. This can be done easily as shown in the code snippet below.

<Dropdown simple={true} text="dropdown" icon={someNodeOrObject}>
 <Dropdown.Menu>
   <Dropdown.Item>Profile 1</Dropdown.Item>
   <Dropdown.Item>Profile 2</Dropdown.Item>
   <Dropdown.Item>Profile 3</Dropdown.Item>
   <Dropdown.Item>Profile 4</Dropdown.Item>
 </Dropdown.Menu>
 </Dropdown>

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

Retrieving the original state value after updating it with data from local storage

Incorporating the react-timer-hook package into my next.js project has allowed me to showcase a timer, as illustrated in the screenshot below: https://i.stack.imgur.com/ghkEZ.png The challenge now lies in persisting the elapsed time of this timer in loca ...

javascriptreactjsreact-hooksnext.jstimer

Tips for creating a scrollable sidebar while ensuring that the deeply nested child pop-up element does not adhere to the scrollable properties

In my project, I am using Vue 3 along with Tailwind CSS and Headless UI. The challenge I am facing is making the sidebar navigation scrollable while ensuring that the pop-up menu appears outside the sidebar. As the number of menu items in the sidebar will ...

cssvuejs3tailwind-css

Exploring the world of logging in Reactjs with the power of

I'm looking for a way to track and log every request made in react js and redux on the client side. I need this logging functionality to capture errors in a file, as well as monitor the life cycle of components. Can anyone provide guidance on how to a ...

reactjsloggingreact-reduxerror-logging

Issue with Material UI grid not rendering properly in TypeScript environment

I've been trying to replicate a grid from material-ui using React and Typescript. You can see a live demo here. I modified the example to work with Typescript, so my demo.tsx file looks like this: Code goes here... If you check out the live demo, y ...

reactjstypescriptmaterial-ui

A <div> with 100% height nested within a full-page div positioned at top:0 and bottom:0

Here's a simple problem. I need a full-height div (#inner) inside another full-height div (#outer, but with padding). This code displays correctly in Firefox and IE8, but not in IE7 and IE6. Edit: In the specific context where I'm using this s ...

htmlcssinternet-explorer

Customize your QTabBar icons with Qt Stylesheet: Adjusting the icon mode

I am currently working on customizing a QTabBar with a stylesheet in my tool. I use QIcon to create icons for the tabs, allowing me to set different modes such as normal, disabled, and selected. The challenge I am facing is trying to apply a global stylesh ...

cssqtqt4

Is it possible to establish a delay for requestAnimationFrame()?

My webpage has a very long layout with text in one column and a floating element in another. I want the floating element to follow the scroll of the window and return to its original offset once scrolling stops. The current code I have is: var ticking = ...

javascriptcssscrollrequestanimationframe

Navigating pages using a dropdown menu in NEXT.js

Looking to navigate to different pages based on dropdown selection, but unsure how to do so in React and Next. "use client" import Link from 'next/link'; function Home() { return ( <main> <h1>Hello</h1> ...

reactjsnext.jsnext-routernext-link

What is the best way to download a modified canvas with filters using the solutions from stackoverflow?

There have been numerous inquiries regarding how to apply CSS filters to an image, with some solutions that don't utilize CSS filters but still achieve the desired outcome. However, for someone new to JavaScript like myself, these answers can be confu ...

javascripthtmlcsscanvascss-filters

Hover Effect for 3D Images

I recently came across an interesting 3D Hover Image Effect that I wanted to implement - https://codepen.io/kw7oe/pen/mPeepv. After going through various tutorials and guides, I decided to try styling a component with Materials UI and apply CSS in a differ ...

cssreactjstypescriptmaterial-ui

Ways to create distance between columns in Bootstrap 5

screenshot i want like this Looking at the image provided, there seems to be an issue with spacing between the red and blue columns. Despite trying various Bootstrap classes, the desired result has not been achieved. Adding m-4 to the Navbar, Header, and ...

htmlcssbootstrap-5spacingbootstrap-grid

Limit the types of components allowed as children in a React component by utilizing TypeScript

I've been struggling with this question for a while, searching through answers but still unable to get my code to work. Here's the issue at hand. Within my code, I have a component called Steps which acts as a wrapper. I also have multiple Step ...

reactjstypescriptnpmchildren

Getting the specific key of the selected item from material-ui autocomplete when onSelect is triggered, rather than simply retrieving the value

I am incorporating React with Material-ui and utilizing the Autocomplete component described in detail on this page - https://material-ui.com/components/autocomplete/ using downshift. <Downshift id="downshift-options"> ...

javascriptreactjsmaterial-uidownshift

Having trouble with the filtering feature in Material UI Datagrid

I'm currently using Material UI Data Grid to display a table on my website. The grid has an additional filter for each column, but when I click on the filter, it hides behind my Bootstrap Modal. Is there a way to bring it to the front? https://i.stac ...

javascriptcssreactjsdatagridmaterial-ui

Final div class nested within the HTML and styled with CSS

Is there a way to keep the last div (class) from sliding underneath? I applied margin-right to .artist_wrap. I assumed that using overflow: hidden would contain it within #music_videos_wrap, but it just disappears. Any assistance is greatly appreciated. H ...

htmlcss

Formatting text to automatically continue onto the next line without requiring scrolling through long blocks of

I have a unique Angular project with a terminal interface that functions properly, maintaining a vertical scroll and automatically scrolling when new commands are entered. However, I am struggling to get the text within the horizontal divs to wrap to the ...

javascripthtmlcssangular

Modify the state of each individual button

I recently came across a cool implementation using clicks and jQuery fade effects to show a div when a button is clicked and then change the state of the button. Check it out here: http://jsfiddle.net/ttj9J/5/ HTML <a class="link" href="#" data-rel="c ...

jqueryhtmlcss

What are my choices for showcasing hierarchical information?

I'm currently working on organizing hierarchical data using HTML, JS, and jQuery. My chosen method involves utilizing a left-floated div container system in place of a grid system for easier recursive code generation. One challenge I've encounter ...

htmlcsshierarchy

Is there a way to dynamically alter the URL when clicking in ReactJS?

The provided code snippet inserts a next button that fetches the subsequent 20 items from my backend. When the button is clicked, the data updates with the next set of 20 items, however, the URL remains unchanged. function PokemonList() { const classes = u ...

reactjsonclickreact-router-domapollo-clientuse-state

Pop-up alert for text sections that are longer than a specific character limit

As I work on a website featuring dynamically generated blog posts of varying lengths, I'm looking to restrict the height of each post to 250px. Should a post exceed this limit, I want to truncate it and include a "read more" link that opens a modal ov ...

javascriptjqueryhtmlcss