score:2

Accepted answer

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>


Related Query

More Query from same tag