React - 如何使用 OnClick 在 class 中渲染组件？

Question

I am new to React and still learning how things work. I would like to programatically generate some google-maps-react.Polyline once the Marker is clicked.

Before:

After:

I can create the Polylines by rendering directly in the class return. However, I have no idea on how to dynamically generate it on click. I tried the code below but it didn't work.

onMarkerClick = (props, marker, e) =>
    this.setState({
        selectedPlace: props,
        activeMarker: marker,
        showingInfoWindow: true
    })
        render(){
            return(
                <>
                {pathCoordinates.coordinates.map(item => 
                    <Polyline
                        path={item}
                        geodesic={true}
                        options={{
                            strokeColor: "#ff2527",
                            strokeOpacity: 0.3,
                            strokeWeight: 1,
                            icons: [
                                {
                                    icon: lineSymbol,
                                    offset: "0",
                                    repeat: "2px"
                                }
                            ]
                        }}
                    />)}
                </>
            )
        }
    ;

Here you can find the whole class code:

export class WhereWeFly extends Component {
    state = {
        showingInfoWindow: false,  // Hides or shows the InfoWindow
        activeMarker: {},          // Shows the active marker upon click
        selectedPlace: {}          // Shows the InfoWindow to the selected place upon a marker
      };

    onMarkerClick = (props, marker, e) =>
    this.setState({
        selectedPlace: props,
        activeMarker: marker,
        showingInfoWindow: true
    });

    onClose = props => {
    if (this.state.showingInfoWindow) {
        this.setState({
        showingInfoWindow: false,
        activeMarker: null
        });
    }
    };

    render() {
        return (
            <>
            <div className='wherewefly' id='wherewefly'>
                <div className='wwf-title' id='wwf-title'>
                    <h1>
                        <i class='fas fa-map-marker'></i>
                        <span>Where do we fly to?</span>
                    </h1>
                </div>
                <Map
                    google={this.props.google}
                    zoom={zoom}
                    style={mapStyles}
                    initialCenter={initCenter}>
                
                    {markers.marker.map(item =>       
                    <Marker
                        onClick={this.onMarkerClick}
                        name={item.location}
                        position={                    {
                            lat: item.lat,
                            lng: item.lng
                        }}
                    />)}

                    <InfoWindow
                        marker={this.state.activeMarker}
                        visible={this.state.showingInfoWindow}
                        onClose={this.onClose}
                    >
                    <div className='wwf-marker'>
                        <h4>{this.state.selectedPlace.name}</h4>
                    </div>
                    </InfoWindow>
                    {pathCoordinates.coordinates.map(item => 
                    <Polyline
                        path={item}
                        geodesic={true}
                        options={{
                            strokeColor: "#ff2527",
                            strokeOpacity: 0.3,
                            strokeWeight: 1,
                            icons: [
                                {
                                    icon: lineSymbol,
                                    offset: "0",
                                    repeat: "2px"
                                }
                            ]
                        }}
                    />)}
                </Map>
            </div>
        </>
        );
  }
}

How can I programatically generate the polylines?

Answer 1

I created a new state called clicked and made a conditional render as below:

clicked: true

{this.state.clicked && pathCoordinates.coordinates.map(item => 
                    <Polyline