I have a form where the user can choose a country from a list (autocomplete), and when the user selects a country, it’s respective regions (cities or states) will appear in another autocomplete with multiple options so the user can select multiple regions. The problem is, I should show multiple of these 2 lists when the user clicks on the ‘add’ FAB, so the user can choose to add another country with it’s regions to choose from. The useState of regions duplicate the regions in the console log. How can I solve this? Or is there a better way to handle this form, a better design maybe?

I have a table defined as

I’m working on a project where I need to enable drag-and-drop functionality for rows within a Material-UI DataGrid using React Beautiful DnD. I’ve set up the DataGrid and integrated React Beautiful DnD for draggable functionality, but I’m having trouble getting it to work correctly for rows.

I am trying to pass custom component to MUI TExtfield via InputProps->inputComponent.

I have a question regarding the styling of the following text. I would like to style the number separately. In other words, I want to make the number larger than the text. How can I apply the inline style with the following code?

I have a question regarding the styling of the following text. I would like to style the number separately. In other words, I want to make the number larger than the text. How can I apply the inline style with the following code?

I’m trying to disable the default action of adding the elments I selected in select, in the select window, but I don’t know how. I’m also not sure how I can pass the key correctly, is the way I have it in MenuItem done correctly? The data I am mapping is a variable that has a new Set with an array of items with a specific name (item). I am using material ui.

import React, { useCallback, useEffect, useState } from “react”; import VideoContainerView from “../selfView/VideoContainerView”; import Button from “src/common/Button/Button”; import { useTwilioUserMediaContext } from “../../call-sdk/context/TwilioUserMediaContext”; import { useNavigate } from “react-router-dom”; import ErrorBoundary from “../ErrorBoundary”; import { datadogRum } from “@datadog/browser-rum”; import HelpScreenDialog from “./HelpScreen/HelpScreenDialog”; import { useCall } from “src/call-sdk/context/CallContext”; import { useToast } from “src/context/ToastContext”; […]

I have a MUI popover which gets opened while hovering a div and will get closed once the mouse pointer leaves the div. But this makes the popover close if the pointer leaves the div and enter popover element too. How can this be solved?

In React js, I have a Header component and a SideBar (Mini variant drawer) component in different files, and only the SideBar drawer is from MUI 5 in dashboard page.
How can I make Header on top of the SideBar or shift the logo to the right in the header when the drawer is opened?