score:0
when cancelling the modal by the button "cancel", you're basically updating the state of your modal component, you don't update the state of your home
component. what you can do is that on "cancel" click you have a function, which does something like:
const oncancelmodal = () => {
setmodal(false);
props.toggle(false);
}
this way it's gonna work, here's a link for a complete code.
https://codesandbox.io/s/blissful-brown-io0dz?file=/src/register.tsx
hope this helps.
score:1
don't duplicate states. use the toggle
value and callback in register
component as you are already passing it.
code snippet
function register(props: any) {
const [firstname, setfirstname] = usestate<string>("");
// const [modal, setmodal] = usestate(props.modal); // no need of this
//console.log(modal);
const validatesignup = () => {
if (firstname === "") {
props.toggle(true);
} else {
props.toggle(false);
}
};
return (
<modal isopen={props.modal} toggle={props.toggle}>
<modalheader>sign up</modalheader>
<modalbody>
<formgroup>
<label>first name</label>
<input
type="text"
onchange={(e: any) => setfirstname(e.target.value)}
/>
</formgroup>
</modalbody>
<modalfooter>
<button color="success" onclick={validatesignup}>
sign up
</button>
<button
color="danger"
onclick={() => {
// setmodal(false); // not required
props.toggle(false);
}}
>
cancel
</button>
</modalfooter>
</modal>
);
}
Source: stackoverflow.com
Related Query
- Modal works after second click
- After the second click Modal is not showing in my react boostrap table
- Pagination works after second click
- React query - Why onSubmit only works after the second click
- OnClick in react portal works only after second click
- Component did update works only after second click
- React checkbox get (un)checked after the second click
- Reactjs - onClick works after first click
- React Native Fetch works only on second click
- React Router only updating after second click
- Why button works only after second click? (reactjs)
- React, onClick only works after second click, Axios, Async/Await
- Undefined on the first click in the second one it works | React/Redux/axios
- Why I get null in the first click and in the second or any click after it i get input element correct, react js?
- Button in ReactJS calls the function only after the second click, no effect after the first click
- Pagination works from the second click
- firebase web sign up with google only works after clicking the second time?
- React Leaflet Routing Machine: onClick to add Marker after all waypoints are removed fires only after second click
- Why chart renders after second click - react-chartjs-2
- React - console logs empty an array and then logs a populated array after a second button click
- I have a search function that only works after typing the second letter
- React delete active class after second click
- React useState hook updating only after second click
- Onclick function getting the correct data after the second click
- the marker is added after the second click state hasn't been updated with the newItem you added yet?
- "Is it possible to follow Lick to 'some path url' only after second click ?"
- Changing order of React components only triggers re-render after second click
- Why is my OnChange function not logging the first value I click on but only starts logging after the second click?
- React setState occurs after second click
- Firebase denies permission after first time then works on second time
More Query from same tag
- How can we await in dispatch for a particular value in redux action creator?
- ReactJs throwing error importing svg files
- How to use Private Route using react-router?
- How to unpack a tarball with npm to get the package.json file out
- React Router Dom Prevent Prompt When Params Change
- React Native alignSelf center and stretch to maxWidth?
- With ES lint error want to reolve without disabling it or changing rule
- Scroll to top when using Switch (react-router)
- How to make marker always centered when map is moving around?
- How to access a deeply nested DOM Nodes in Reactjs without querySelector (or any DOM API which is being discourage by Reactjs) and refs?
- Regex validation within if statements
- Action creators handling axios get.request with state access for param
- How to increment the count of downloads in API
- Proxied Object Assignment Type Error TypeScript
- How to create a package with the isolatedModules=true option enabled?
- Compare two html element in React.js
- React Router not working link to tag
- 'Router' cannot be used as a JSX component
- Failed prop type: The prop `children` is marked as required in` Sidebar`, but its value is `undefined`
- Node app failing during reactDOM.render()
- Update object value in array React hooks way
- Why is my custom sort not working with Material-UI Data Grid component?
- Why isn't a DOM node rendered by React considered a node by React.PropTypes.node validation?
- How to toggle css class in react with setState Hook
- Replace Autoprefixer browsers option to Browserslist config Error
- React Typescript Function Component typing
- how to delete data from react crud using node js to mongoDB
- Child setState does not work when calling Parent method
- How to wait in enzyme for a promise from a private function?
- Axios Post Request Sending Undefined