score:2
you can lift the state up.
show
state would be owned by the parent component. the parent would pass show
and toggleshow
function to the child to access and change the show
state in the parent.
parent component, index.js:
function main(){
const [show, setshow] = usestate(false);
const toggleshow = () => setshow(p => !p);
return (
<button variant="primary" onclick={toggleshow}>add new</button>
<modaluser message="hei you" show={show} toggleshow={toggleshow} header="info" />
)
}
and in modal component, modaluser.js:
const {show, toggleshow} = props
<modal show={show} onhide={toggleshow}>
<modal.header closebutton>
<modal.title>{props.header}</modal.title>
</modal.header>
<modal.body>{props.message}</modal.body>
<modal.footer>
<button variant="secondary" onclick={toggleshow}>
close
</button>
<button variant="primary" onclick={toggleshow}>
save changes
</button>
</modal.footer>
</modal>
score:0
pass the close callback to modal component and remove local show state in modal
<modaluser message="hei you" show={show} close={() => setshow(false)} header="info" />
const handleclose = () => props.close();
score:0
personally i would recommend extracting the state above and having 1 source of truth for the open state.
//index.js
import react,{usestate} from 'react'
import modaluser from "./modaluser";
function main(){
const [show, setshow] = usestate(false);
const handleshow = () => setshow(true);
return (
<button variant="primary" onclick={handleshow}>add new</button>
<modaluser message="hei you" show={show} header="info" setshow={setshow} />
)
}
//modeluser.js
import react, {usestate,useeffect} from 'react'
import { modal, button } from "react-bootstrap";
function modaluser(props){
const handleclose = () => props.setshow(false);
return (
<>
<modal show={show} onhide={handleclose}>
<modal.header closebutton>
<modal.title>{props.header}</modal.title>
</modal.header>
<modal.body>{props.message}</modal.body>
<modal.footer>
<button variant="secondary" onclick={handleclose}>
close
</button>
<button variant="primary" onclick={handleclose}>
save changes
</button>
</modal.footer>
</modal>
</>
)
}
score:0
try it and then reply me
import react, {usestate,useeffect} from 'react'
import { modal, button } from "react-bootstrap";
function modaluser(props){
const [show, setshow] = usestate(false);
const handleclose = () => setshow(false);
useeffect(() => {
setshow(!props.show);
},[props.show]);
return (
<>
<modal show={show} onhide={handleclose}>
<modal.header closebutton>
<modal.title>{props.header}</modal.title>
</modal.header>
<modal.body>{props.message}</modal.body>
<modal.footer>
<button variant="secondary" onclick={handleclose}>
close
</button>
<button variant="primary" onclick={handleclose}>
save changes
</button>
</modal.footer>
</modal>
</>
)
}
score:0
most probably the inconsistent behavior is due to your double state, delete the local modal state, and pass props state only, you do not need your modal inner state in this situation,pass show and setshow to modal, <modal show={props.show} onhide={() => props.setshow(false)}>{...}</modal>
Source: stackoverflow.com
Related Query
- How to show and hide a Modal in child component from Parent component?
- React: How to close a modal from child opened from parent component
- How to make React.js fetch data from api as state and pass this state data from its parent to child component
- How to pass a prop back from child to parent in onclick handler and then to another component in React?
- How to reset child component from parent using React Context and Hooks
- How to pass value from functional child component to class parent component and save value to state?
- How do I select all Child Components from my Parent Component and then uncheck a few while retaining the other checked components?
- How to render and update child elements coming from a parent component in React?
- How do I access and setState() of a parent component, from a child component onClick
- How to set state in parent from one child component and access the state in another child component using react and typescript?
- How to open child component modal from parent by using its key in ReactJs
- How to call from parent component child function in react, typescript and redux
- How to hide a child element as default and show it when users over over a parent element with material ui(react.js)?
- How to pass parent value to child on first render and change parent component value from Child?
- How to update and display the parent / list component from the child / detail component in ReactJS?
- How to pass in memory json data from parent component to child component in react js and to display that in tabular form in child component
- How to navigate to pages from parent component to child with dynamic header and back?
- How to send array of objects data from child component to parent component and store in the parent object using react hooks?
- How to pass onclick method to child component from parent using react, typescript, and styled-component?
- How do I pass in component from parent to chlid and the child pass in field to the components?
- 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 pass data from child component to its parent in ReactJS?
- How to prevent child component from re-rendering when using React hooks and memo?
- Prevent child component from unmounting and remounting if parent component changes
- How to pass function as props from functional parent component to child
- Can we pass setState as props from one component to other and change parent state from child component in React?
- How to override event handler function of child component from parent component in react.js
- How to pass value from parent component to child component (react)
- how to call function of child in functional component from parent in react.js?
- How to make reactstrap modal open or close from parent component
More Query from same tag
- React.js Failed to compile: unexpected token
- How to fix 'index.js:1446 Warning: Can't call setState (or forceUpdate) on an unmounted component..." in ReactJS
- React-router not loading css for nested pages on refresh
- Google signin is not working properly on ComponentDidMount
- How do I make the navbar disappear when I click away
- API_KEY is not used error in my inspector
- SetState is undefined
- Cleave.js in React: TypeError: Cannot set properties of undefined (setting 'element')
- What is the actual difference between using an inline-style and using a css-in-js library like styled components in React?
- how to append react div element from an array with a child element ? and how to give to mapped parent elements unique "key" props
- Font-Awesome adds attribute aria-hidden which prevents icons from appearing in the browser [SSR]
- Transition between routes in react-router-dom v6.3
- How to immediately rerender child component after updating the sessionStorage using custom hook
- Undesired scrolling in React on rendering component
- How to configure webpack to find images in scss via this way: url(a.png) instead of url(../../image/a.png)
- How to change state in a handler
- React JS — how do I add child components and set calculated transformations?
- Using react-dates with redux-form results in an error
- React - Functions are not valid as React child
- Filtering data for more visualization of data in react-chartjs-2 when you have lot of array element
- How can we call onNewRequest property in onBlur in AutoComplete Material-UI?
- Focusable Input
- How to access value based on index from array defined in state ReactJS
- A list within a list using Reactjs
- React. Redirect by button click in React with react-router-dom
- React error invalid hook & state is not defined
- How to compare and remove the object from array if value is same in Javascript?
- how to send a zip file back end to front end in nodejs using express server
- <meta> not working when initial-scale is changed
- How to fix my React Context to render useEffect and reload table data