title: React button not responding to click
body: <p>My React button's click is not responding to onClick. I am just doing a simple console.log(), and that is not even working. </p>
  
  <p>The weird thing is that when I also place the button in App.js, the button will click in my other component but not without it. This makes me think it has something to do with how it is being mounted. </p>
  
  <p>In App.js I have the following inside App.js' render() to route to my component (Tweets.js):</p>
  
  <pre><code>&lt;div className="App-intro"&gt;
      &lt;Switch&gt;
        &lt;Route path="/home" component={Home}/&gt;
        &lt;Route path="/appTweets" render={(props) =&gt; &lt;Tweets {...props} tweets="home" /&gt;} /&gt;
      &lt;/Switch&gt;
  </code></pre>
  
  <p>And this is Tweets.js:</p>
  
  <pre><code>import React, { Component } from 'react'
  import {Tweet} from 'react-twitter-widgets';
  
  
  const TweetList = (props) =&gt; {
    console.log('tweet list props');
    console.log(props)
    return (
      &lt;div&gt;{props.tweets.map(tweet=&gt; &lt;Tweet key={tweet.tweet_id} {...tweet}/&gt;)}
      &lt;/div&gt;
  
    ); 
  }
  
  
  class Tweets extends React.Component {
  
    constructor(props) {
      super(props)
      console.log("tweet props");
      console.log(props);
      this.handleClick=this.handleClick.bind(this);
      this.state = {
        error: null,
        isLoaded: false,
        items: [],
        tweets: [],
        selectedPolitician: null,
      }
    }
  
    handleClick(e) {
      console.log('clicked aoc ');
      console.log(e);
    }
  
  
  
    componentDidMount() {
      console.log("fetching the hostname");
      // fetch(HOST_NAME + TWEET_ENDPOINT) 
      var hostname = "";
      if (window.location.hostname === "localhost"){
        hostname = "http://localhost:8000";
      } else {
        hostname = "https://pst-360.herokuapp.com"
      }
      console.log(hostname);
      fetch(hostname + "/tweets/?format=json")
      .then(res =&gt; res.json())
      .then(
        (result) =&gt; {
          this.setState({
            isLoaded: true,
            items: result,
            tweets: result.results.map(function(tweet){
              return {"tweetId": tweet.tweet_id};
            })
          });
          console.log("got result!");
          console.log(result);
        }
      )  
    }
  
     render() {
       return (
       &lt;div className="container-fluid text-center"&gt;
  
    &lt;button type="button" className="btn btn-primary" onClick={this.handleClick.bind(this)}&gt;Alexandria Ocasio Cortex&lt;/button&gt;
  
      &lt;div className="row content"&gt;  
      &lt;/div&gt;
        &lt;div className="col-sm-8 text-left"&gt; 
          &lt;TweetList tweets={this.state.tweets} /&gt;
        &lt;/div&gt;
        &lt;div className="col-sm-2 sidenav"&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  
       )
     }
   }
   export default Tweets
  </code></pre>