score:0
simply wrap the dialogs in a wrapper component and have both point to the same reference for their open
states.
take a look at this sandbox for a working example: https://codesandbox.io/s/delicate-star-cox1g
function dialogs() {
const [open, setopen] = usestate();
return (
<>
<button onclick={() => setopen("first")}>open first dialog</button>
<dialog open={open && open === "first"}>
<dialogtitle>first dialog</dialogtitle>
<dialogactions>
<button onclick={() => setopen("second")}>close first dialog</button>
</dialogactions>
</dialog>
<dialog open={open && open === "second"}>
<dialogtitle>second dialog</dialogtitle>
<dialogactions>
<button onclick={() => setopen(null)}>close second dialog</button>
</dialogactions>
</dialog>
</>
);
}
Source: stackoverflow.com
Related Query
- How to close the parent dialog once the child dialog opens, using Material UI React
- How to submit the form by Material UI Dialog using ReactJS
- How to submit the child values in parent component using reactjs?
- How to update parent state and child components props at once (at the same time)
- How to update the correct state value in a parent component that gets its value from a child component using hooks in react?
- How can I close a Material UI Modal using an X icon rather than just by clicking outside the modal?
- How to Unit test the rendering of a child component in the parent component using react testing library?
- How do I get the state of the parent component in a child styled component using tagged template literals?
- How to render the parent component in the child component using react and typescript?
- How can I set the state of my parent component from the child component when using react-router?
- How to pass a function reference to a child component while also using the state of the parent component?
- How to set state in parent from one child component and access the state in another child component using react and typescript?
- How to alert child once the parent component's fetch call has been completed? ReactJS
- How do I use react context API to pass data from parent component to child component when using react-router in the parent component in React.js?
- react (class based) : How can I update JSON object in parent component using setState after the object being passed in function from child to parent?
- How can i make a child animation happen every time the parent animation is beginning using framer motion & react
- How to pass styles from a child to the parent using styled components
- How do I simulate clicking a child Tab and call the onClick handler that is defined in the Parent container using Jest?
- How to send array of objects data from child component to parent component and store in the parent object using react hooks?
- Using React, how do you pass a function from a parent component to a child component and run it in the useEffect hook?
- How to add multiple classes in Material UI using the classes props?
- How do I access refs of a child component in the parent component
- How to make the whole Card component clickable in Material UI using React JS?
- How do you change a style of a child when hovering over a parent using MUI styles?
- How to add close icon in Material UI Dialog Header top right corner
- how to make material data grid width to fill the parent component in react js
- Unit test: simulate the click event of child component in parent using enzyme
- Make child of Material UI Grid item stretch to fit the remaining height of the parent container
- How to fix the error 'alpha' is not exported from '@material-ui/core/styles' when using Skeleton in Material UI
- How do I prevent Material UI Dialog from being dismissed upon clicking the backdrop?
More Query from same tag
- show default value in select input with backgroundcoulr different for each : react js
- Using Ag-grid with object of nested objects
- How to set img in label using React?
- I can't map through the array 'products'(React/Redux)
- React Hook Form Controller Issues
- Typescript react redux, property does not exist on type {}
- React - api data is being successfully passed to component(per inspector) but not being rendered
- Radium doesn't work with React Router IndexLink component
- How to namespace es6 classes (for React components)
- What is the best way to filter data in React?
- how can i use NavLink to redirect from component to another component
- Link Button to route to the another component is not working in React js
- Issue using event.preventDefault
- Same route path with different component in React
- average total value of columns in table using react hooks with material UI
- componentWillUnmount is not getting invoked
- DRF "Unauthorized: <route>" when Authorization header is present from React FE
- Closing Material UI Dialog from child component triggers parent's Dialog to open
- Why do my error messages not update when a field is filled out? (React)
- set absolute path for jest in react project
- Unit testing react component function
- How to apply data into useState constant?
- Render thousands/millions times with React and Tauri (rust)
- I need to use Mongoose to search with non-overlapping parameters?
- Drag to Change not possible when material-ui slider is styled
- A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>
- React Navigation 3.x Require cycle warning
- How to clean up subscriptions in react components? (Hooks)
- React included script data not recognized
- Typescript and jsx, why is a statically declared state null in the lifecycle of the object?