title: Uncaught TypeError: _this.props.onClick is not a function
body: <p>I am novice in <code>react</code> and try to build an <code>api</code>.
  My issue is the <code>props</code> i am passing from child to parent component using <code>onClick</code> function is throwing error.
  I even tried to use this keyword but i can't figure out what's wrong is going on.</p>
  
  <p>I figured out that my <code>StockContent</code> component is not receiving the <code>showOverlay</code> props which i am passing from body component</p>
  
  <p>I am intended to navigate to the current click content by changing it url using onClick functionality..</p>
  
  <p>the whole project is here ... <a href="https://github.com/Kushan-/stockStimulation" rel="nofollow noreferrer">https://github.com/Kushan-/stockStimulation</a></p>
  
  <pre><code>{
      import React from 'react';
      import ReactDOM from 'react-dom';
      import StockContent from '../bodyRoutes/StockContent.js'
      import ShareOverlay from '../bodyRoutes/SharesOverlay.jsx'
  
      const pushState = (obj, url) =&gt; window.history.pushState(obj, '', url);
  
      class Main extends React.Component{
          state = {
              content: []
          }
  
          componentDidMount(){
              $.ajax({
                  url: '/data',
                  context: this,
                  dataType: 'json',
                  type: 'GET'
              }).done(function (res) {
                  console.log(res)
                  this.setState({
                      content:res
                  });
              })
          }
  
          componentWillUnmount(){
              //clean timers, listners
          }
  
          fetchStock = (stockName, stockId) =&gt; {
              const url = '/'+stockName+'/'+stockId;
              const obj = {currentStockName :  stockName, currentStockId : stockId}
              pushState(obj,url);
  
              this.setState({
                  currentStockName: stockName,
                  currentStockId: stockId
              })
          };
  
          displayPop(){
              if(this.state.currentStockId) {
                  console.log(this.state.content[this.state.currentStockId]);
                  const data= this.state.content[this.state.currentStockId];
                  return(&lt;div className="row" &gt;&lt;ShareOverlay stockData={data}/&gt;&lt;/div&gt;)
              }
              return(&lt;StockContent showOverlay={this.fetchContent} content={this.state.content}/&gt;)
          }
  
          render(){
              return(
                  &lt;div&gt;
                      {this.displayPop()}
                  &lt;/div&gt;
              )
          }
      }
  
      export default Main;
  }
  </code></pre>