ReactJS dropdown menu not working backdrop-filter

Issue

I'm trying to add blur backdrop filter to my dropdown menu in react js project. But it's not work. It's work with all anothher elements but not working with this.

I mean I need blur like in header in dropdown menu. Here image of problem

I really want to bealive somebody help me with this. I try many things but it's not help me

This react code:

function Header(){
    return(
        <div>
            <div className="Header">
                <div className="Header-Container">
                <img className="Logo" src={Logo} />
                    <div className="search-cont"><input type="search" id="site-search" name="q" placeholder="Поиск..."></input></div>
                    <NavItem >
                        <DropdownMenu/>
                    </NavItem>
                <img id="Basket" src={Basket}/>
                <img id="Profile" src={Profile}/>
                </div>
            </div>
        </div>
    );
}

function NavItem(props){
    const[open, setOpen] = useState(false);
    return(
        <div className="Category">
            <div onClick={() => setOpen(!open)}>
                Все категории
                <img id="DownArrow" src={DownArrow}/>
            </div>

            {open && props.children}
        </div>
);
}
function DropdownMenu(){
    function DropdownItem(props){
        return(
        <div className="menu-item">
            {props.children}
        </div>
        );
    }
    return(
        <div className="dropdown">
            <DropdownItem>
                #Хиты
            </DropdownItem>
        </div>
    );
}

This SCSS code:

body{
  .Header {
    .dropdown{
      backdrop-filter: blur(5px) opacity(100%);
      background: #333333a5 0% 0% no-repeat padding-box;
      display: inline-block;
      box-shadow: inset 0px 0px 35px #c8c8c810, 0px 3px 30px #0000004D;
      border: 1px solid #666666a8;
      border-radius: 15px;
      z-index: 10;
      position: absolute;
      top: 0vh;
      padding-top: 40%;
      padding-left: 20%;
      padding-right: 20%;
      padding-bottom: 40%;
      opacity: 1;
      .menu-item{
        height: 2vw;
        width: 12vw;
        margin-bottom: 5%;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        transition: all 0.4s ease-in-out;
        text-align: center;
        font: normal normal bold 18px Montserrat;
        letter-spacing: 1.2px;
        color: #FFFFFF;
        opacity: 1;
        cursor: pointer;
      }
      .menu-item:hover {
        background-color: #FFFFFF28;
      }
    }
    }

Solution

• Never declare a React Component inside another React Component, since it's going to be destroyed and recreated at each render.

function DropdownItem(props){
                    return(
                    <div className="menu-item">
                        {props.children}
                    </div>
                    );
                }

function DropdownMenu(){
            return(
                <div className="dropdown">
                    <DropdownItem>
                        #Хиты
                    </DropdownItem>
                </div>
            );
        }

• I tried your code on stackblitz and it seems to work: https://stackblitz.com/edit/react-onrm6s?file=src%2FApp.js

Make sure you have updated your browser since backdrop-filter is not supported by all browsers.

Answered By - Cesare Polonara