I'm new guy in this. I'm trying to make popup windows component but I need help for winish this.

There is the start of popup component:

the component get's 2 props activity = true/false, and content = view component inside popup window

So i have the state called "window" it need's for changing visibility in styles. and I have a close button that hide popup window. I don't know how, but i need that this close button send the false value to the another component.

const Modal = ({activity, content}) => {

    const [window, setWindow] = useState(activity);

  return (
    <ModalWrapper isActive={window}>
        <Section>
            <Content>
                <Close onClick={() => setWindow(false)}>Close Window</Close>
                {content}
            </Content>
        </Section>
    </ModalWrapper>
  )
}

Another component that open the popup. if button was clicked the active state is changing and send the activity prop with true value. After this I can close popup by clicking the close button. But after this the "another component" steel will be true and after this i can't to be able click the popup again.

const [active, setActive] = useState(null);

    const handleClick = () =>{
        setActive(<Modal activity={true} content={<Feedback />} />);
    }

  return (
    <>
        {active}
        <NavbarWrapper>
            <OrderButton onClick={handleClick}>Замовити сайт</OrderButton>
        </NavbarWrapper>
    </>
  )

CodePudding user response：

I typically like to use a parent component with a state that controls what is being shown. You can learn more about State React Hooks here.

If you use conditional rendering, and the condition is based on state, you'll get great results.

To hide the modal, you just need to pass a function along that can be called by the child to hide itself.

I like to use objects as the state object. It keeps it simple and clean, and you can change multiple state variables in a single setState() call, whereas if you use multiple useState hooks then it gets funky when you have to set two of them at once.

function Parent({ ...props }){

    const [state, setState] = React.useState({
        showModal: false
    })

    return (
        <section className="parent">
            {
                state.showModal
                    ? <Modal
                        props={... }
                        closeModal={() => {
                            setState({
                                ...state, // Use deconstructing to preserve other values in the state object
                                showModal: false // Now set the variable to false
                            })
                        }}
                    />
                    : <></>
            }
            <button onClick={() => {
                setState({
                    ...state, // Use deconstructing to preserve other values in the state object
                    showModal: true // Now set the variable to false
                })
            }} type="button">
                Show Modal
            </button>
        </section>
    )

}

function Modal({ closeModal, ...props }){

    return (
        <div className="modal">
            <button onClick={closeModal}></button>
        </div>
    )

}