DEV Community

loading...

help, i am stuck

cmuralisree profile image Chittoji Murali Sree Krishna ・1 min read
  1. when i use this in react its working only once in local server,
  2. but when i deploy it on gh-pages, its not at all working
  3. is there any other way of handling this in react?
const close = document.querySelectorAll('.close');
for(var i=0; i<close.length; i++){
close[i].addEventListener('click', function(){
this.parentElement.parentElement.style.display = 'none';
})
}
Enter fullscreen mode Exit fullscreen mode

Discussion (6)

pic
Editor guide
Collapse
lexlohr profile image
Alex Lohr

You shouldn't really manipulate the dom this way in react. The way to do this is to have your close buttons have an onClick handler that calls a callback given as a prop from the parent, i.e.

const ParentComponent = () => {
  const [closed, setClosed] = useState(false)
  const close = useCallback(() => setClosed(true), [])
  return <div style={closed ? { display: 'none' } : null}>
    <ChildComponent close={close}/>
  </div>
}

const ChildComponent = ({close}) => (<span onClick={close}>Close</span>)
Enter fullscreen mode Exit fullscreen mode
Collapse
cmuralisree profile image
Chittoji Murali Sree Krishna Author

Thanks you mr.Alex, 🙏
I will change it according to your suggestion,
Thanks a lot

Collapse
darkain profile image
Vincent Milum Jr

First thing to try, open up your browser's console log window and see if it is telling you anything interesting either when the page is first loading, or when you press the button.

Without seeing the rest of the page, there isn't too much else we could speculate on, however.

Collapse
cmuralisree profile image
Chittoji Murali Sree Krishna Author • Edited

when the page is loading, it shows like,

(index):1 [Intervention] Slow network is detected. See chromestatus.com/feature/563695467... for more details. Fallback font will be used while loading: cdnjs.cloudflare.com/ajax/libs/fon...

log.js:24 [HMR] Waiting for update signal from WDS...

but when i click button, its not showing anything.

Collapse
Sloan, the sloth mascot
Comment deleted
Collapse
cmuralisree profile image
Chittoji Murali Sree Krishna Author

But this have great developers