Использование React для публикации и обновления счетчика в клиентском компоненте

Question

Невозможно заставить эту кнопку onClick работать и обновить номер "дано слава". В основном 3 .js файлы, при этом это API для тестирования. Мой код:

app.js:

import React, { Component } from 'react';
import './App.css';

import KudoList from "./components/KudoList";

import axios from "axios";

class App extends Component {

  state = {
    contacts: []
  };

  componentDidMount() {
    axios
      .get("https://kudos-devtech8-yvbvpoek.herokuapp.com/users")
      .then(response => {
        const newContacts = response.data.map(c => {
          return {
            id: c.id,
            name: c.username,
            fname: c.first_name,
            lname: c.last_name,
            kgive: c.kudos_given_count,
            kreceived: c.kudos_received_count
          };
        });

        const newState = Object.assign({}, this.state, {
          contacts: newContacts
        });

        this.setState(newState);
      })
      .catch(error => console.log(error));
  }
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <h1 className="App-title">Welcome to our Kudo app</h1>
        </header>
        <KudoList contacts={this.state.contacts} />
      </div>
    );
  }
}

export default App;

The Contact.js:

import React from "react";
import "./Contact.css";

class Contact extends React.Component {
    state = { kgive: 0,
              fname: '',
              lname: '',
              kreceived: ''
    };

    constructor(props) {
      super(props);

      this.incrementKudoCount = this.incrementKudoCount.bind(this);
    }

    incrementKudoCount(ev) {
      this.setState((prevState) => ({
        kgive: prevState.kgive+ 1,
      }));
    }

    render() {
      return (
        <div className="appPerson">
          <p>Name: {this.props.fname} {this.props.lname} <button onClick={() => this.incrementKudoCount()}>Give Kudo!</button></p>
          <p>Kudos Given: {this.props.kgive}</p>
          <p>Kudos Received: {this.props.kreceived}</p>
        </div>
      );
    }
  }

export default Contact;

А затем KudoList.js:

import React from "react";
import Contact from "./Contact";

function KudoList(props) {
  return (
    <div>
        {props.contacts.map(c => <Contact key={c.id} name={c.name} fname={c.fname} lname={c.lname} kgive={c.kgive} kreceived={c.kreceived} /> )}
    </div>
  );
}

export default KudoList;

Я не получаю ошибок, но событие привязки кнопки не работает правильно и не знаю, почему. Должен ли я иметь отдельный компонент для создания кудо или он не может быть таким же простым, как у меня с небольшой модификацией?

Answer 1

Слушатель события должен быть функцией. Я вижу, что вы возвращаете (вызываете) функцию. Просто onClick={this. incrementKudoCount} должно работать.

** ОБНОВЛЕНИЕ: рабочая песочница ** (поскольку песочница stackoverflow не поддерживает импорт) https://codesandbox.io/embed/j2w729p329