How can I use a Button Child in more than one Parents?

Question

I hope someone can help me. I'm pretty sure that it's really easy but most of the time it get me really stuck.

I'm using React and in this example I have two Parents components and one CloseButton Child component that has the function of hide and show the Parents. How can I use and share the same CloseButton component to the Parents? (Sorry if it is unreadable). Thank you for the help

// CLOSE BUTTON .JS
export default function Close_Button(props) {

function close() {


    var hide = document.querySelector('.container_blur');
    // if(hide.style.display='none' == 'none'){


    setTimeout(function () {
        hide.style.opacity = 0;
        hide.style.transition = 'opacity 0.3s ease-out';
    }
        , 10)
    setTimeout(function () {
        hide.style.display = 'none';
    }, 300)


}
return (
    <div onClick={} className='d-flex close_button'>

        <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="12.5" cy="12.5" r="12" stroke="#896DF6" />
            <path d="M17 8L8 17M17 17L8 8" stroke="#896DF6" stroke-width="3" stroke-linecap="round" />
        </svg>
    </div>)
    }

    // ParentOne.js
    export default function ParentOne(props) {

const [list, setList] = useState([
    { id: 1, name:'Bitcoin', image:'/bitcoin-logo.svg' }, 
    { id: 2, name:'Etherium', image:'/eth-logo.svg' }, 
    { id: 3, name:'Bitcoin', image:'/doge-logo.svg' },
    { id: 1, name:'Bitcoin', image:'/bitcoin-logo.svg' }, 
    { id: 2, name:'Etherium', image:'/eth-logo.svg' }, 
    { id: 3, name:'Bitcoin', image:'/doge-logo.svg' },
    { id: 1, name:'Bitcoin', image:'/bitcoin-logo.svg' }, 
    { id: 2, name:'Etherium', image:'/eth-logo.svg' }, 
    { id: 3, name:'Bitcoin', image:'/doge-logo.svg' }
])


return (
    <section className='container_blur' id='select_token' >
            
        <div className={style.token_container}>
            <div className={style.nav}>
                <span>Select token</span>

                // Child Button
                <Close_Button ></Close_Button>
            </div>
            <Input_search></Input_search>

            <div className={style.coin_container}>
                <ul className={style.ul}>

                <div className={style.li}>
                {list.map((list) =>
                <li  key={list.id} ><Image src={list.image} width={27} height={35}></Image><p>{list.name}</p></li>)}
                </div>
                   
                   
                </ul>
            </div>
        </div>

    </section>
)
}
 // Parent Two
 export default function ParenTwo(props) {



const [token, setToken] = useState([
    {id:1, name:'MetaMask', image:'/metaMask_Fox.png'},
    {id:2, name:'WalletConenct', image:'/wallet-connect.png'},
    {id:3, name:'KeyStone', image:'/keystone.svg'},
    {id:4, name:'Torus', image:'/torus.svg'},
    {id:5, name:'CoinBase Wallet', image:'/coinbase-wallet.png'},
    {id:6, name:'Fortmatic', image:'/fortmatic.svg'}

])
return (
    <section className='container_blur' id='connect_w'>

        <div className={style.container_wallet}>

            <div className={style.nav}>
                <span>Connect wallet</span>

              // Child Button
               <Close_Button ></Close_Button>
            </div>

            <div className={style.wallet_wrap}>
                 
            
             <div  className='d-flex flex-wrap align-items-stretch justify-content-between'>
                    
             { token.map((token,id) =>
                     <div key={id} className={style.wallet_select}>
                     <p>{token.name}</p>
                     <Image src={token.image} width={32} height={32}></Image>
                    </div> 
                 )}

                </div>
                

            

            </div>

        </div>
    </section>
)
}

Answer 1

You can select all parents using querySelectorAll. The code you posted was not formatted properly, so this is what I could make out of it.

function close() {
    let parents = document.querySelectorAll('.container_blur')'
    if ( parents.length < 1 ) return;
    parents.forEach(parent => {

       setTimeout(function () {
          parent.style.opacity = 0;
          parent.style.transition = 'opacity 0.3s ease-out';
       }, 10);

       setTimeout(function () {
          parent.style.display = 'none';
       }, 300);

    });
}