score:1
Accepted answer
sounds like you just need to check if the ref exists first:
const onbodyclick = (event) => {
if (!ref.current) {
// component is unmounting
// below line could be used or commented out; since the component is unmounting,
// the state should not make a difference
// setopen(false);
return
}
if (ref.current.contains(event.target)) {
// component is not unmounting, and click was inside ref
return;
}
// component is not unmounting, and click was outside ref
setopen(false);
};
score:0
i have the same problem and this is working for me
if(this.wrapperref && !this.wrapperref.contains(event.target) {
this.setstate({visibility: false});
}
i check if wrapperref exists and i check if the wrapper contains the html element
i know you are using react hooks, but the idea is the same.
Source: stackoverflow.com
Related Query
- How do I arrange events in useEffect in React
- How to fix missing dependency warning when using useEffect React Hook
- How to call loading function with React useEffect only once
- How do I window removeEventListener using React useEffect
- How to stop memory leak in useEffect hook react
- How to clean up setInterval in useEffect using react hooks
- How do I simulate browser events when writing tests for React js?
- How to handle click events on child components in React.js, is there a React "way"?
- How to make AppBar component from material-ui-next react to scroll events
- How to execute store.unsubscribe from useEffect using React hooks and Redux
- React: How does React make sure that useEffect is called after the browser has had a chance to paint?
- How can React useEffect watch and update state?
- How to slowdown/debounce events handling with react hooks?
- How to fix React Redux and React Hook useEffect has a missing dependency: 'dispatch'
- How to wait for React useEffect hook finish before moving to next screen
- How to test events created with mousetrap in react using jest
- How to Listen for Events in children components in React Native?
- How do I manage state on a React component that can have state changed from the parent or from events upon it?
- How to test `contenteditable` events with React Testing Library
- How to fetch data without useEffect hooks in React function component?
- How to reset React hook state with setTimeout in useEffect
- How to check if state default boolean false is changing to true with React Hook useEffect
- How to test react component based on file reader emitted events
- How to use react hook useEffect only once in my case?
- How to test useState and useEffect react hooks
- React useEffect calls API too many time, How can I limit the API call to only once when my component renders?
- React Formik : How to useEffect with formik values?
- How to mock Publish/subscribe events on React Components when using PubSubJS with Jest/Enzyme?
- How to cancel all subscriptions inside UseEffect in React
- If using forceUpdate() is discouraged, how should components react to change events in the model?
More Query from same tag
- How do we read one level nested deep array data from firebase in react js?
- React Router to change route/component without changing browser URL
- React settimeout in useeEffect is called every time I navigate back
- Material UI TextField border overlaps with Label
- how to create React Context for a function value without re-rendering all the time
- jsPDF.html method doesn't recognize the image quality option
- Default Values from API in MUI Text field
- How can I print all elements of an array (passed as props from the parent's state) inside JSX code?
- How to prevent collection() from setting if the key already exist on firebase
- Attempted import error: 'react-table' does not contain a default export (imported as 'ReactTable')
- React Typescript passing props and data type
- CSS Position Material UI Menu item below its parent
- forEach not working for response.data in React
- Correct way to configure babel-loader in webpack for HMR
- React Native javascript object value to array
- How can I pass the selected date(value) from react calendar to another component?
- How to prevent direct access to success page after the payment?
- Unable to render props in a page from Styled Components object
- Redux Reducer => Cannot convert undefined or null to object
- Select element with clickable image component
- Accessing state in a parent component from a child component
- How can I make a chart through JSONfile from highchats? please help me
- How to update array using PUT API request in Strapi
- onClick activating every other onClick events
- copytoClipboard in reactjs
- Can't call setState on a component that is not yet mounted, even though it is?
- How can i sent limited fields while updating form in react
- manipulating Material-UI with a .css file
- JSX: Inline conditional attribute [href]
- useReducer is not updating the sate with useEffect