title: How to render a component onClick with React?
body: <p>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:</p>
  
  <p>How to call to functions with <code>onClick</code> 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:</p>
  
  <pre><code>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(){
      &lt;GoogleMapContainer barLat={bar.coordinates.latitude} barLong={bar.coordinates.longitude} /&gt;
    }
  
    render() {
      const newCard = this.props.newCard
      const bar = this.props.selectedBar
      // console.log("this are the coordinates", bar["coordinates"])
      if(bar.coordinates){
        return (
          &lt;div&gt;
            &lt;p&gt;{bar.coordinates.longitude}&lt;/p&gt;
            &lt;p&gt;{bar.name}&lt;/p&gt;
            &lt;img src={bar.image_url} /&gt;
            &lt;button&gt; X &lt;/button&gt;
            &lt;button onClick={newCard}&gt; Yes &lt;/button&gt;
  
          &lt;/div&gt;
        )
      } else {
        return(
          &lt;div&gt;Loading...&lt;/div&gt;
        )
      }
    }
  }
  
  export default BusinessCard;
  </code></pre>
  
  <p>At the moment, there's a problem with that compiling since <code>bar</code> is undefined when rendering. Any suggestions/advice?</p>