React onClick не работает / не пытается раскрыть мои проекты с помощью указанной кнопки c

Question

Поэтому я редактирую свое портфолио, чтобы при его открытии не было кластера проектов: [1]: https://i.stack.imgur.com/GIKNa.jpg

Поэтому я добавил кнопки для языков и фреймворков в попытке сделать их выпадающими с помощью onClick. Я добавил параметр onClick и функцию для его обслуживания, но в консоли console.log («нажата была эта кнопка») не будет отображаться.

Кроме того, если у кого-то есть ресурсы, которые помогут мне составить этот список для моего портфолио, я был бы признателен за то, что здесь указан мой код и объект, который я использую для хранения своих данных.

   import React, { Component } from "react";
export default class Porfolio extends Component {
  handleClick = e => {
    e.preventDefault();
    console.log("The link was clicked.");
  };

  render() {
    let resumeData = this.props.resumeData;
    return (
      <section id="portfolio">
        <h1>Check Out Some of My Projects!</h1>
        <div className="portfolio__button__layout">
          <button onClick={this.handleClick}>Javascript</button>
          <button onClick={this.handleClick}>CSS & HTML</button>
          <button onClick={this.handleClick}>React</button>
          <button onClick={this.handleClick}>NodeJS</button>
          <button onClick={this.handleClick}>Ruby on Rails</button>
        </div>
        <div className="portfolioGrid">
          {resumeData.portfolio &&
            resumeData.portfolio.map(item => {
              return (
                <a
                  href={`${item.url}`}
                  rel="noopener noreferrer"
                  target="_blank"
                >
                  <div className="portfolio-item portfolioGridSquare">
                    <div className="item-wrap">
                      <img
                        src={`${item.imgurl}`}
                        alt="these are my projects"
                        className="item-img"
                      />
                      <div className="overlay">
                        <div className="portfolio-item-meta">
                          <h5>{item.name}</h5>
                          <p>{item.description}</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </a>
              );
            })}
          <div id="portfolio-wrapper"></div>
        </div>
      </section>
    );
  }
}

И ОБЪЕКТ

  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: ""
    },

Answer 1

У меня есть код, очень похожий на ваш, и он отлично работает. Единственное отличие состоит в том, что так выглядит мой handleClick:

handleClick = () => {
        this.setState({

          displayMap: true,
          isOpened: !this.state.isOpened,
          searchTerm: this.state.value
          });
        console.log("The link was clicked.");
      }

Итак, вам может потребоваться изменить код на:

handleClick = (e) => {
    e.preventDefault();
    console.log("The link was clicked.");
  };

Answer 2

Не могли бы вы проверить с помощью этого кода?

<button onClick={() => this.handleClick()}>Javascript</button>

Я думаю, вы должны использовать анонимную функцию