title: React onClick not working / attempting to have my projects drop down with specific button
body: <p>So I am editing my portfolio so I don't have a cluster of projects when opened:  [1]: <a href="https://i.stack.imgur.com/GIKNa.jpg" rel="nofollow noreferrer">https://i.stack.imgur.com/GIKNa.jpg</a></p>
  
  <p>So I added buttons for the languages and frameworks in an attempt to have them dropdown with an onClick. I added an onClick param and the function to cater to it but in the console, the console.log("this button was clicked") won't show up. </p>
  
  <p>Additionally, If anyone has resources to help me achieve this drop list for my portfolio I would appreciate it here is my code and the object I am using to store my data.</p>
  
  <pre><code>   import React, { Component } from "react";
  export default class Porfolio extends Component {
    handleClick = e =&gt; {
      e.preventDefault();
      console.log("The link was clicked.");
    };
  
    render() {
      let resumeData = this.props.resumeData;
      return (
        &lt;section id="portfolio"&gt;
          &lt;h1&gt;Check Out Some of My Projects!&lt;/h1&gt;
          &lt;div className="portfolio__button__layout"&gt;
            &lt;button onClick={this.handleClick}&gt;Javascript&lt;/button&gt;
            &lt;button onClick={this.handleClick}&gt;CSS &amp; HTML&lt;/button&gt;
            &lt;button onClick={this.handleClick}&gt;React&lt;/button&gt;
            &lt;button onClick={this.handleClick}&gt;NodeJS&lt;/button&gt;
            &lt;button onClick={this.handleClick}&gt;Ruby on Rails&lt;/button&gt;
          &lt;/div&gt;
          &lt;div className="portfolioGrid"&gt;
            {resumeData.portfolio &amp;&amp;
              resumeData.portfolio.map(item =&gt; {
                return (
                  &lt;a
                    href={`${item.url}`}
                    rel="noopener noreferrer"
                    target="_blank"
                  &gt;
                    &lt;div className="portfolio-item portfolioGridSquare"&gt;
                      &lt;div className="item-wrap"&gt;
                        &lt;img
                          src={`${item.imgurl}`}
                          alt="these are my projects"
                          className="item-img"
                        /&gt;
                        &lt;div className="overlay"&gt;
                          &lt;div className="portfolio-item-meta"&gt;
                            &lt;h5&gt;{item.name}&lt;/h5&gt;
                            &lt;p&gt;{item.description}&lt;/p&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/a&gt;
                );
              })}
            &lt;div id="portfolio-wrapper"&gt;&lt;/div&gt;
          &lt;/div&gt;
        &lt;/section&gt;
      );
    }
  }
  </code></pre>
  
  <p>AND THE OBJECT </p>
  
  <pre><code>  portfolio: [
      {
        name: "OmniFood",
        description:
          "CSS/HTML - Food delivery application that involves fluid grids, proper design techniques, positioning, media queries, Jquery, and much more. This project is responsive on web, tablets and iPhones of all sizes.",
        imgurl: "https://media.giphy.com/media/hvLOGi1KsF02XiZ1DD/giphy.gif",
        url: "https://stephenbilham.github.io/SbOmniFood/"
      },
      {
        name: "Forkify",
        description:
          "JS - Here you can search through an API of recipes and add your favorites to a shopping list/favorite recipes (ingredients change with serving size). This was a complex app, using Async functions, fetch, await, callbacks, and closures",
        imgurl: "https://media.giphy.com/media/ekeOYzzNEpW73RIcSb/giphy.gif",
        url:
          "https://github.com/stephenbilham/Financial-budgeting-App/tree/master/Budgety/Starter"
      },
      {
        name: "Connect Four",
        description:
          "React - This was logically challenging. The hardest part was finding all of the winning combinations using mathamatical algorithims/trial and error. The stetch goal is to add animation for the connect four pieces to fall.",
        imgurl: "https://media.giphy.com/media/YrC2lEAcG4loOj2aLI/giphy.gif",
        url: ""
      },
      {
        name: "Laptop Store",
        description:
          "Node JS - Node Js practice where the purpose was to learn how to properly route based on filesharing/URL/ID's and rendering a cool looking laptop store application. This was the first introduction that I had to Node JS. ",
        imgurl: "https://media.giphy.com/media/VGKPGZX3F2fDzC3zxX/giphy.gif",
        url: ""
      },
  </code></pre>