Close button wont close onClick in react-CodePudding

Im creating an app for dog parks using Google maps api. Currently i'm grabbing parks in a certain area and if they meet the requirement of a dog park it will show in the google maps. If a user clicks on the marker on the map a popup screen that shows data. I have a button that closes box but when I click on it won't close.

This is my marker page

import InfoWindow from './InfoWindow';
import './CssPages/Marker.css';
import { useState } from 'react';
import { Button } from 'react-bootstrap';

const Marker = (props) => {
    const { color, name, id} = props;
    const [show, setShow] = useState(false);
    return (
     <>
      <div className="pin bounce"
        style={{ backgroundColor: color, cursor: 'pointer'}}
        title={name}
        onClick={() => setShow(!show)}
      />
      <div className='pulse' />
      {show ? <InfoWindow style /> : ""}
      </>
    );
  };

  export default Marker;

This is my Popup page

import './CssPages/InfoWindow.css';
import { Button } from 'react-bootstrap';

const InfoWindow = (props) => {
    const {name, rating, population, quality} = props;

    return (
    <div className="infoWindowStyle">
        <h3>Dogg Park</h3>
        <p>Rating: 4/5</p>
        <p>Population: High</p>
        <p>Quality: Poor</p>
        <button className="close-btn" onClick={() => props.setTrigger(false)}>close</button>
        <Button className='btn btn-map'>Update</Button>
    </div>
    );
  };

  export default InfoWindow;

This is the google map page

import GoogleMapReact from 'google-map-react';
import Marker from './Marker';
import * as parkData from "../parks.json";
import "./CssPages/Map.css";
const AnyReactComponent = ({ text }) => <div>{text}</div>;


function GetMap({latitude, longitude}) {
  const defaultProps = {
    center: {
      lat: 39.0997,
      lng: -94.578331
    },
    zoom: 10
  }

  return (
<div style={{ height: '85vh', width: '95%', margin: '3rem auto' }}>
      <GoogleMapReact
        bootstrapURLKeys={{ }}
        defaultCenter={defaultProps.center}
        defaultZoom={defaultProps.zoom}
      >
          <Marker
          lat={39.11173}
          lng={-94.79552}
          />
      </GoogleMapReact>
    </div>
  );
}
export default GetMap;

CodePudding user response：

You need to pass in the props to your InfoWindow component:

{show ? <InfoWindow style /> : ""}

should be something like:

{show ? <InfoWindow setTrigger={() => setShow(false)} /> : ""}

Because your button:

<button className="close-btn" onClick={() => props.setTrigger(false)}>close</button>

relies on a setTrigger method in your props which you haven't defined as it currently is.

You can just set it to:

<button className="close-btn" onClick={props.setTrigger}>close</button>

CodePudding user response：

In Marker component add setTrigger to InfoWindow component like

<InfoWindow setTrigger={setShow} />