score:0
1.you are not providing a complete component example so we know if there are conflicts, if there's a different setisopen that overwrites the one in this component or any other bugs that might be caused by your logic. 2.you are not specifying the relationship of oncalendarselect and this component. are you passing the function as a prop? are you extracting it from context? is it defined inside the component? 3. do you have another setisopen in the app that could overwrite the one here?
however. i think you should pass the setisopen function to your oncalendarselect function. as in the example below. if this does not work please provide the full component code and the code of the component where oncalendarselect is.
const [isopen, setisopen] = usestate(false);
{isopen && (
<drop
overflow="unset"
align={{ right: "left", top: "bottom", bottom: "bottom" }}
style={{ overflowy: "scroll" }}
target={targetref.current}
onclickoutside={() => setisopen(false)}
onesc={() => setisopen(false)}
>
<calendar
date={
value
? moment(value)
.format()
.split("t")[0]
: null
}
onselect={evt => {
oncalendarselect(evt.tostring(), setisopen);
}}
size="small"
{...(calendarpassedprops as calendarprops)}
/>
</drop>
)}
useeffect(() => {
console.log("useeffect ",isopen)
}, [isopen])
const oncalendarselect = (v: string, setisopen: any) => {
console.log(isopen) //always showing true
setisopen(false)
const date = moment(v)
.format()
.split("t")[0]
.replaceall("-", "/");
try {
setvalue(date);
if (onchange) {
onchange(date);
}
} catch (e) {
// prevent invalid dates
}
};
score:0
fixed by adding a evt.stoppropagation
<drop
overflow="unset"
align={{ right: "left", top: "bottom", bottom: "bottom" }}
style={{ overflowy: "scroll" }}
target={targetref.current}
onclickoutside={() => setisopen(false)}
onclick={(evt: react.mouseevent) => {
evt.stoppropagation();
}}
>
Source: stackoverflow.com
Related Query
- React state change not triggering useEffect
- React Hooks - useEffect fires even though the state did not change
- React useEffect is not triggering on route change
- Change of state is not getting affected in another unmount useEffect in react hooks
- React Hooks, setTimeout in useEffect not triggering until end, because of state updates
- React Hooks Wrapper not getting updated after state change in useEffect
- React useEffect is not triggering on link to route change
- React useEffect is not triggering after prop change
- React useEffect Hook not called after redux State Change
- React Child Component Not Updating After Parent State Change
- React component not re-rendering on state change
- useEffect Hook Not Firing After State Change
- React shouldComponentUpdate() is called even when props or state for that component did not change
- React leaflet center attribute does not change when the center state changes
- Props not updating when redux state change in React Hooks
- react is not updating functional component state on input change
- react component state change after ajax call but does not rerender component
- React Child with useEffect() not updating on Parent State Change
- React not re-rendering on state change
- Map of React Components not re rendering on State Change
- React State change is not Rendering
- Prop change not triggering useEffect
- React - useEffect running even when there was no change in state variable
- React child component not re-rendering on parent state change
- Redux-form v6 isDirty (and isPristine) selector not triggering re-render on state change
- React - will not re render on state change
- React Native ListView not re-rendering on state change by click
- React useCallback does not get updated on state change
- React UI not updating on state change
- useEffect not getting trigger after state change
More Query from same tag
- How to call an API every 5 minutes using React?
- How to show table data in react javascript from a list of object?
- Why is initial state being set over and over again in the "useState" hook of react
- What is the right way to change language without redirection in HTML?
- React useState in functional components not updating the property values immediately
- Include two javascript code in one html tag : jsx syntax problem
- How to make the transition to another section of a same page through clicking anchor tag (<a>) smoother in React?
- React, Adding data from json to single post component
- React Fetch Returning __proto__ Object When Passed as Props
- Removing references to Gatsby
- How to change background color in react materialUI card
- How do I use state and the value of an object's keys to dynamically style in React?
- React, variable speed Clock with setTimeout
- Change focus of text input with react
- Working with Strings and useState variables in react js?
- How to add additional props to a React element passed in as a prop?
- UseEffect - Use state to create an external Link
- How do I implement Sibling Component communication in App shell and SSR
- How can i get the new state from the mapped props after dispatching an action
- How to navigate to another component and pass data
- Can't set global state from reduxForm to local state
- React-Redux: State always one input behind
- How to update the global state using redux and remove an item from the global state
- Making a typing timer in RxJS; Tracking time spent typing
- Can not return from a function
- How to read only specific parts of the markdown files created through Netlify CMS in React dynamically?
- How to concatenate the strings received from api
- webpack 5 - Parsed request is a module
- How to handle multiple input field changes by a single function
- How to show/hide one element from data array rendered dynamically with react