DEV Community

Chittoji Murali Sree Krishna
Chittoji Murali Sree Krishna

Posted on

help, i am stuck

#react #help #webdev
  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

Top comments (9)

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 •

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

Collapse
 
pthacker profile image
Pratik thacker •

Hey brother, you are attaching a listener to every element which is alright but it is not efficient at all. Imagine you have 1000 elements and 1000 click listeners..what you can also try is Event bubbling or event propagation...If you do not understand these concepts , you can go through the following videos:
https://www.youtube.com/watch?v=aVSf0b1jVKk&t=348s

youtube.com/watch?v=3KJI1WZGDrg

Collapse
 
cmuralisree profile image
Chittoji Murali Sree Krishna •

Thanks a lot brother, to be frank, I am seeing these kinds of topics for the first time,

Thanks again for sharing the information, I will definitely look into it.

Collapse
 
pthacker profile image
Pratik thacker •

There is always first time.... someday even i heard it for the first time...

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 • • 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 •

But this have great developers

Read next

alexandrecalaca profile image

BCrypt::Errors::InvalidHash (invalid hash)

Alexandre Calaça -

ariflogs profile image

Building an UI library that does not look generic!

Arif Hossain -

mayank_mohapatra profile image

Creating a Multilingual Expense Tracker with Tolgee

Mayank Mohapatra -

undolog profile image

Upgrading from Nextra v2 to Nextra v3: A "Quick" Guide

Giovambattista Fazioli -