How to render a component onClick with React?

I'm trying to render a map of a specific location that's being passed from a parent component. I'm using google-maps-react and i'm unsure of two things:

How to call to functions with onClick inside my render. And how to write the function in my class that renders the component I want. This is wha tI have so far:

import React, { Component } from 'react';
import yelp from 'yelp-fusion';
import xhr from 'xhr';
import GoogleMapContainer from './Map';

class BusinessCard extends Component {
  constructor () {
    super()

    this.renderMap = this.renderMap.bind(this);
  }

  renderMap(){
    <GoogleMapContainer barLat={bar.coordinates.latitude} barLong={bar.coordinates.longitude} />
  }

  render() {
    const newCard = this.props.newCard
    const bar = this.props.selectedBar
    // console.log("this are the coordinates", bar["coordinates"])
    if(bar.coordinates){
      return (
        <div>
          <p>{bar.coordinates.longitude}</p>
          <p>{bar.name}</p>
          <img src={bar.image_url} />
          <button> X </button>
          <button onClick={newCard}> Yes </button>

        </div>
      )
    } else {
      return(
        <div>Loading...</div>
      )
    }
  }
}

export default BusinessCard;

At the moment, there's a problem with that compiling since bar is undefined when rendering. Any suggestions/advice?