New to React, struggling with Modals. Is this the right way to deal with Modals?

Question

I just can't get this to work. Although I'm close, I feel like I'm handling Modals in the wrong way. Am I? I just feel like I'm doing this in a very messy way Lol..

So I have an Events Component..

export default function Events(props) {

    const [events, setEvents] = useState([]);
    const [openModal, setOpenModal] = useState(false);

    const newEvent = () =>{
        setOpenModal({openModal:true})
        setEvents(
            events => [...events,
            <Event openModal={true}/>]
        );
    }

    console.log('hi from eventss');
    return (
        <div className="Events" onClick={newEvent} style={{width:'100%'}}>
            {events}
        </div>
    )
}

Events Div...

Which returns a div with an 'onclick' event . When clicked, it triggers the 'newEvent' function .

The 'newEvent' function creates an Event Component sending a prop openModal=true and sets its state..

This is the Event Component

const Event = (props) => {

    const [openModal, setOpenModal] = useState(props.openModal);

    return (

        openModal?
        <ModalEvent isOpen={openModal} backgroundcolor = {props.backgroundcolor}/>
        :
        <div className="Event" style={{backgroundColor: props.backgroundcolor}}>
            new event
        </div>
         
    );
}

export default Event;

Event is going to return the ModalEvent Component since openModal=true..

This is the ModalEvent component

import React, {useState, useEffect} from 'react';
import Modal from 'react-bootstrap/Modal'
import Button from 'react-bootstrap/Button'
import Event from './Event'

function ModalEvent(props) {
    const [openModal, setOpenModal] = useState(true);
    const [address, setAddress] = useState("");

    const handleChange = (e) =>{
      setAddress({address: e.target.value})
    }

    console.log(openModal);

    useEffect(() =>{
      console.log('effectssss');
    })

    return (
      
      openModal?
      <Modal
        size="sm"
        show={openModal}
        onHide={() => setOpenModal(false)}
        aria-labelledby="example-modal-sizes-title-sm"
      >
        <Modal.Header closeButton>
          <Modal.Title id="example-modal-sizes-title-sm">
            Small Modal
          </Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <div className="container">
            <div className="row">
              <form style={{width:'100%'}}>
                <div className="col-sm-12">
                  <label htmlFor="address"> Address</label>
                  <input type="text" name="address" style={{width:'100%'}}/>
                </div>
                {/* <div className="col-sm-12" style={{marginTop:'20px'}}>
                  <input type="submit" value="Submit" />
                </div> */}
              </form>
            </div>
          </div>
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onMouseDown={() => setOpenModal(false)}>
            Close
          </Button>
          <Button variant="primary" onMouseDown={() => setOpenModal(false)}>
            Save Changes
          </Button>
        </Modal.Footer>
      </Modal>
      :
      <>
      <Event openModal={false} backgroundcolor={'#' + Math.floor(Math.random()*16777215).toString(16)} address={address}/>
      </>

    );
  }
  
export default ModalEvent;

Modal in action...

The ModalComponent is going to keep returning a Model Component until it sets its openModal=false (which it does through the buttons onMouseDown events).

So the PROBLEM is when I click on the modal or anywhere in the screen.. the **Events Component"" is trigger again, which triggers another Modal to pop up..

Like this.....

If I click on the buttons to close the modal, the modal closes how it's supposed to be...

If I add an onClick event on the ModalBody/ModalFooter, it stops it from triggering the Event Component but then it closes (of course)... which it doesnt help because the user needs to be able to click inside the model and also input the address..

So yea, that it, I'm not really sure how to handle this, I'm not sure if I'm handling Modals in the right way of if I'm missing an idea of how react works... any help is appreciated thank you!

Answer 1

You could look into trying something along the lines of this

const newEvent = () =>{
        setOpenModal(!openModal)
        setEvents(
            events => [...events,
            <Event openModal={!openModal}/>]
        );
    }

This sets the openModal to the opposite of its boolean value.