React useEffect Problems

user_14703008 0
Viewed 60

So here is the problem which I can't seem to solve. I have an app component, inside of App I have rendered the Show Component. Show component has toggle functionality as well as a outside Click Logic. In the Show component I have a Button which removes an item based on his Id, problem is that When I click on the button Remove. It removes the item but it also closes the Show Component, I don't want that, I want when I press on button it removes the item but does not close the component. Thanks

App.js

const App =()=>{

   const[isShowlOpen, setIsShowOpen]=React.useState(false)

   const Show = useRef(null)

    function openShow(){
      setIsShowOpen(true)
    }
    function closeShowl(){
      setIsShowOpen(false)
    }


const handleShow =(e)=>{
      if(show.current&& !showl.current.contains(e.target)){
        closeShow() 
      }
    }
    useEffect(()=>{
        document.addEventListener('click',handleShow)
          return () =>{
           document.removeEventListener('click', handleShow)
          }   
      },[])
 return (
  <div>

  <div ref={show}>
    <img  className='taskbar__iconsRight'  onClick={() => 
     setIsShowOpen(!isShowOpen)} 
       src="https://winaero.com/blog/wp-content/uploads/2017/07/Control- 
        -icon.png"/>
          {isShowOpen ? <Show  closeShow={closeShow}  />: null}
   </div>
)
}

Show Component

import React, { useContext } from 'react'
import './Show.css'
import {  useGlobalContext } from '../../context'
import WindowsIcons from '../../WindowsIcons/WindowsIcons'
import { GrClose } from 'react-icons/gr'
const Show = ({closeShow}) => {
 
  const {remove, icons }= useGlobalContext()

  
  }
    return (
        <div className='control__Panel'>
          <div className='close__cont'>
          <GrClose className='close' onClick={closeShow} />
           <h3>Show</h3>
          </div>
          <div className='control__cont'>
          {icons.map((unin)=>{       
            const { name, img, id} = unin  
            return (             
             <li className='control' key ={id}>
               <div className='img__text'> 
               <img className='control__Img' src={img} />             
                <h4 className='control__name'>{name}</h4>
               </div>
                <button className='unin__button' onClick={() => remove(id)} >remove</button>                             
              </li> )
        
          })}
          
          </div>
              
        </div>
    )
}

export default Show
reactjs javascript
2 Answers

Try stop propagation function, it should stop the propagation of the click event

<button 
  className='unin__button'
  onClick={(e) => {
   e.stopPropagation();
   remove(id);
  }}
>remove</button>
user_85370830

You have a few typos in your example. Are they in your code? If they are, you're always reach the closeShow() case in your handler, since you're using the wrong ref.

const App =()=>{

   const[isShowOpen, setIsShowOpen]=React.useState(false) <<-- Here 'isShowlOpen'

   const show = useRef(null)  <<-- here 'S'how

    function openShow(){
      setIsShowOpen(true)
    }
    function closeShow(){  <<-- Here 'closeShowl'
      setIsShowOpen(false)
    }


const handleShow =(e)=>{
      if(show.current&& !show.current.contains(e.target)){ <<-- here 'showl'
        closeShow() 
      }
    }
    useEffect(()=>{
        document.addEventListener('click',handleShow)
          return () =>{
           document.removeEventListener('click', handleShow)
          }   
      },[])
 return (
  <div>

  <div ref={show}>
    <img  className='taskbar__iconsRight'  onClick={() => 
     setIsShowOpen(!isShowOpen)} 
       src="https://winaero.com/blog/wp-content/uploads/2017/07/Control- 
        -icon.png"/>
          {isShowOpen ? <Show  closeShow={closeShow}  />: null}
   </div>
)
}
user_87547820
Related