Bootstrap Modal use from other Component in React

Question

This is MapContainer.js

import React, { useEffect, useState } from 'react';
import { GoogleMap, LoadScript, Marker} from '@react-google-maps/api';


const MapContainer = () => {

    const [ currentPosition, setCurrentPosition ] = useState({});
  
    const success = position => {
      const currentPosition = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      }
      setCurrentPosition(currentPosition);
    };
    
    useEffect (() => {
      navigator.geolocation.getCurrentPosition(success);
    })

    const mapStyles = {        
        height: "100vh",
        width: "100%"};
 
  
  return (
     <LoadScript googleMapsApiKey='AIzaSyA40-c3DnhRdFQ5In8xPdTgQSUne1UFhZI'>
       <GoogleMap mapContainerStyle={mapStyles} zoom={13} center={currentPosition}>
          {    
          currentPosition.lat &&
            ( 
              <Marker onClick={""} position={currentPosition}/> 
            )          
          } 
        </GoogleMap>
        
     </LoadScript>
  )
}

export default MapContainer;

And This is ModalBootstrap.js

import { render } from '@testing-library/react';
import React, { useState } from 'react';
import { Modal, Button } from 'react-bootstrap';
import MapContainer from '../MapContainer/MapContainer';


function Example() {
    const [show, setShow] = useState (false);
  
    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);
  
    return (
      <>
        <Button variant="primary" onClick={handleShow}>
          Launch demo modal
        </Button>
  
        <Modal show={show} onHide={handleClose}>
          <Modal.Header closeButton>
            <Modal.Title>Modal heading</Modal.Title>
          </Modal.Header>
          <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
          <Modal.Footer>
            <Button variant="secondary" onClick={handleClose}>
              Close
            </Button>
            <Button variant="primary" onClick={handleClose}>
              Save Changes
            </Button>
          </Modal.Footer>
        </Modal>
      </>
    );
  }
  
  render (<Example />);

  export default Example;

I want to show the 'Modal' when I click on the Marker [in MapContainer.js].I also want to pass the value of latitude and longitude from MapContainer.js to ModalBootstrap.js . I want to pass those datas when I click on the Marker. When I click on the Marker a modal will be pop up and it will show the current latitude and longitude of the location. I've implemented the google map successfully. But couldn't pass the value to the ModalBootStrap.js and show the Modal when I click the Marker. How can I do this?

Answer 1

Switch your modal to be controlled from a parent state instead of having an internal state, such that the state & state setter for the modal show prop can be controlled by passing these state as props down to the Map Component. An example of these is you can have your Example component & MapContainer component have the same parent component

export default function App() {
  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  const [currentPosition, setCurrentPosition] = useState({});

  return (
    <>
      <MapContainer
        currentPosition={currentPosition}
        setCurrentPosition={setCurrentPosition}
        handleShow={handleShow}
      />
      <Example
        currentPosition={currentPosition}
        show={show}
        handleClose={handleClose}
        handleShow={handleShow}
      />
    </>
  );
}

Back on your MapContainer component just update it to use the handleShow prop for the onClick prop of Marker so it will control the opening of the modal. As for the currentPosition state, we can also moved this state up since this will also be used by the modal as to display the Latitude & Longitude.

const MapContainer = ({ currentPosition, setCurrentPosition, handleShow }) => {
  ...
    return (
      <Marker onClick={handleShow} position={currentPosition} />
    )
      ...

Finally, on the modal, just use the passed currentPosition props to display the data as necessary

function Example({ show, handleShow, handleClose, currentPosition }) {
  return (
    ...
    <Modal.Body>
      Latitude: {currentPosition.lat} Longitude: {currentPosition.lng}
    </Modal.Body>
    ...
  )
}